js实现选项卡效果
学javascript语法很简单，对于有过其他编程语言基础的人来说学js入门只要把手册看一遍就差不多啦。
但是要写出网页上比较炫的效果却不那么容易，为什么呢？因为思路，或者说不懂原理。网上有很多的
js源码，但是基本是代码类的，html,css，javascript全部夹在一起看。这对于不是很精通js的屌丝来说
要看懂然后写出一个更炫的效果出来很痛苦。我就是一个很痛苦的人。没办法，看原理去吧。
下面介绍一个选项卡效果
首先看图：
功能分析：点击不同的Button按钮会有动态的显示出不同的频道
实现原理：四个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>
浙公网安备 33010602011771号