利用原生js实现的简单tab切换

概述：这是一个利用原生js实现的简单的选项卡切换效果。主要用到了js的getAttribute和setAttribute方法，以及“排他思想”。

html部分

<div id="container">
<!--选项卡导航->
<a href="#" class="on">栏目一</a>
<a href="#" >栏目二</a>
<a href="#" >栏目三</a>
<a href="#"  style="border-right: solid 1px #FF4400;">栏目四</a>
<div class="clear"></div>
<!--选项卡内容->
<div class="content" style="display:block;">
<img src="img/qqhf-11.jpg" />
</div>
<div class="content">
<img src="img/qqhf-12.jpg" />
</div>
<div class="content">
<img src="img/qqhf-13.jpg" />
</div>
<div class="content">
<img src="img/qqhf-14.jpg" />
</div>
</div>

css部分

<style>
*{margin: 0; padding: 0; font-family: "微软雅黑";font-size: 14px;}
#container{
width: 398px;
margin: 100px auto;}
#container a{
display:block ;
width: 88px;
height: 42px;
line-height: 42px;
text-align: center;
float: left;
border-top: solid 1px #FF4400;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
color: #333333;
text-decoration: none;
}
#container a:hover{
color: #FF4400;
}
.content{
width: 355px;
height: 163px;
text-align: center;
border-right: solid 1px #FF4400;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
display: none; //设置所有内容div样式为隐藏
}
.clear{clear: left;}
#container a.on{ background: #FF4400; color: #fff;} //点击后的按钮样式
</style>

js部分

基本思路：点击事件触发时，把导航按钮所有的样式都去掉，并让所有的内容元素隐藏，同时为当前点击的按钮添加样式；让对应的内容元素显示。

<script>
//找到所有的导航
var container = document.getElementById("container");
var oTab = document.getElementsByTagName("a");
//获取内容元素
var content = document.getElementsByClassName("content");
//为所有的导航标签绑定点击事件
for(var i = 0;i < oTab.length;i++){
oTab[i].setAttribute("index",i);
oTab[i].onclick = function(){
//为当前链接设置样式，其他的去掉样式--排他思想
//先清除所有链接样式，并让所有的内容元素div隐藏
for(var j = 0;j < oTab.length;j++){
oTab[j].className = "";
content[j].style.display = "none";
}
//为当前元素添加样式on
this.className = "on";
//让对应的内容显示
var index = this.getAttribute("index"); //当前链接的索引
content[index].style.display = "block";
}
}
</script>