案例總結：基本的選項卡效果

首先介紹下html結構

Css就不寫了,重點講下腳本的思路

1.Jquery實現選項卡效果

**思路：
(1).當按鈕按下的時候記下當前按鈕的索引值，這里注意下.index()(注意javascript是沒有這個方法的，注意比較記一下按鈕按下的時候如何用javascript記下當前按鈕的索引值）
(2)．當前按鈕加上激活狀態的class，他的兄弟級元素移除激活狀的class,這里用到了.siblings ()(注意javascript是沒有這個方法的，注意比較記一下如何用javascript實現）
(3).與此同時，讓內容部分與當前按鈕序列號相同的顯示，其他消失
**

$(document).ready(function(){ 
	$(".tab li").click(function(){ 
	var index=$(this).index();
	$(this).addClass("on")
		   .siblings().removeClass("on");//切換選中的按鈕高亮狀態					
	$(".tabcont>li").eq(index).show()
			          .siblings().hide();	//在按鈕選中時在下面顯示相應的內容，同時隱藏不需要的框架內容		
	});
	$(".tab li").eq(0).attr("class", "on");
	$(".tabcont>li").eq(0).show();
})

2.jquery函數傳參實現選項卡效果

在同一個頁面上或者一個整站中，我們不可能只用到一個選項卡，為了代碼的復用，也為了不用一次次重復寫那些相似的代碼，我們可以把上述代碼寫成函數方法，用函數傳參的方式來調用它。
代碼如下：

<script type="text/javascript">
function tabs(state,control,show){//control為選項卡導航的class，show為選項卡內容的class，state為動作狀態，如：click，onmouseover......
	$(control + "> li").on(state, function() {		 
	    $(this).addClass("on").siblings().removeClass("on");
	    var index=$(this).index();   
	    $(show + "> li").eq(index).show().siblings().hide(); 
	})
	$(control + "> li").eq(0).attr("class", "on");
	$(show + "> li").eq(0).show();
}
tabs("mouseover",".tab",".tabcont");//調用函數//調用函數
</script>

3.js實現選項卡效果

**思路：
(1).首先是要獲取需要的元素
(2)．要知道選項卡的導航按鈕和內容是一一對應的關系，我們可以用一個for循環，這樣可以得到兩個數組，
tabtit[i].index=i;//自定義.index屬性記錄數組下標
(3)． 上面我們已經自定義一個屬性來記錄數組下標，那我們點擊按鈕時當前按鈕的索引就是this.index
延伸：這就是上文我們說到要注意的點，要注意哦。
Jquery：點擊時，索引值就是$(this).index();
Javascript：用一個for循環，自定義.index屬性記錄數組下標 tabtit[i].index=i;
然后點擊時，索引值就是this.index
(4)．當前按鈕加上激活狀態的class，其他兄弟級元素移除激活狀的class，讓內容部分與當前按鈕序列號相同的顯示，其他消失。
注意javascript是沒有.siblings ()這個方法的，我們要如何實現呢？
方法：
1)用for循環取消所有的按鈕激活狀態class，讓每一個內容部分都隱藏。
2)當前按鈕class設為激活狀態，按鈕對應索引號的內容顯示
**
具體代碼：

<script type="text/javascript">
	//獲取元素
	var tab=document.getElementById("tab");
	var tabtit=tab.getElementsByTagName("li");
	var cont=document.getElementById("tabcont");
	var conttit=cont.getElementsByTagName("li");
	var tabnum=tabtit.length;
	
	for(i=0;i<tabnum;i++){
		tabtit[i].index=i;//自定義.index屬性記錄索引值
		tabtit[i].onclick=function() {
			var j=this.index;//用j表示當前按鈕索引
			for(i=0;i<tabnum;i++){
			   tabtit[i].className="";
			   conttit[i].style.display = 'none'; 
			}
			this.className="on";
			conttit[j].style.display = 'block'; 			
		}				
	}
	tabtit[0].setAttribute("class", "on");
	conttit[0].style.display = 'block'; 
</script>

4.js函數傳參實現選項卡效果

<script type="text/javascript">
	function tab(control,show,state){
		var tab=document.getElementById(control);
		var tabtit=tab.getElementsByTagName("li");
		var cont=document.getElementById(show);
		var conttit=cont.getElementsByTagName("li");
		var tabnum=tabtit.length;
		
		for(i=0;i<tabnum;i++){
			tabtit[i].index=i;
			tabtit[i][state]=function() {
				var j=this.index;
				for(i=0;i<tabnum;i++){
				   tabtit[i].className="";
				   conttit[i].style.display = 'none'; 
				}
				this.className="on";
				conttit[j].style.display = 'block'; 			
			}				
		}
		tabtit[0].setAttribute("class", "on");
		conttit[0].style.display = 'block'; 	
	}
	tab("tab","tabcont","onclick")//調用函數	
</script>

注意：要點：tabtit[i][e] 因為傳值的時候是字符串，如果直接寫的話就是tabtit[i]."onclick"這樣話是執行不了的，tabtit[i]["onclick"]這樣執行沒問題。

一切都是套路，思路理順了，其實也就不難了。

本文為原創，如需轉載請注明轉載地址，謝謝合作！
本文地址：http://www.cnblogs.com/wanghuih/p/6323196.html