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

首先介紹下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