js实现选项卡效果

学javascript语法很简单,对于有过其他编程语言基础的人来说学js入门只要把手册看一遍就差不多啦。

但是要写出网页上比较炫的效果却不那么容易,为什么呢?因为思路,或者说不懂原理。网上有很多的

js源码,但是基本是代码类的,html,css,javascript全部夹在一起看。这对于不是很精通js的屌丝来说

要看懂然后写出一个更炫的效果出来很痛苦。我就是一个很痛苦的人。没办法,看原理去吧。

下面介绍一个选项卡效果

首先看图:

功能分析:点击不同的Button按钮会有动态的显示出不同的频道

js实现选项卡效果

实现原理:四个button按钮下是四个div,在js中添加一个index属性,对应div索引,点击某个按钮时,对应的div显示其余的div隐藏,

并且把当前点击的button改变其背景样式

代码如下:很详细的注释,适合新手,懂原理就行,至于更炫的效果可以发挥自己的想象力

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>选项卡效果</title>

<style type="text/css">

 #div1 div

 {

	  width:200px;

	  height:200px;

	  border:solid 1px #ccc;

	  display:none;

 }

 .btn{background:#FFFF00;}

</style>

<script type="text/javascript">

  window.onload=function()

  {

     var objDiv1=document.getElementById("div1");//得到div1

	 var objBtns=objDiv1.getElementsByTagName("input");//得到input集合

	 var objDivs=objDiv1.getElementsByTagName("div");//得到div1下的div集合

	 for(var i=0;i<objBtns.length;i++)

	 {

	    objBtns[i].index=i;//为button附加一个属性用于索引对应的div频道 ....重点不能再button元素中直接加index

	    objBtns[i].onclick=function()

		{

		   //遍历清除每个button所有样式如果不清除则会重复

			for(var i=0;i<objBtns.length;i++)

			{

			   objBtns[i].className="";

			   objDivs[i].style.display="none";

			}

			this.className="btn";//设置点击的当前样式

			objDivs[this.index].style.display="block";//this代表的是当前的button

			}

	 }

  }

</script>

</head>

<body>

<div id="div1">

 <input type="button" value="教育" class="btn" />

 <input type="button" value="出国" />

 <input type="button" value="家庭" />

 <input type="button" value="金融" />

 <div >教育频道</div>

 <div>出国频道</div>

 <div>家庭频道</div>

 <div>金融频道</div>

</div>

</body>

</html>

 

 

你可能感兴趣的:(js)