利用原生js實作的簡單tab切換

概述：這是一個利用原生js實作的簡單的頁籤切換效果。主要用到了js的getAttribute和setAttribute方法，以及“排他思想”。

html部分

<div id="container">
	<!--頁籤導航->
	<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="on">欄目一</a>
	<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >欄目二</a>
	<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  >欄目三</a>
	<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"   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>