利用原生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>