選項卡的實現方式

本文主要介紹選項卡的實現：原生javascript和jQuery以及Bootstrap
附上演示地址：https://haochn.github.io/demo/tab-panel/js.html
https://haochn.github.io/demo/tab-panel/jquery.html

html部分：

<div class="tab">
<div class="title">
    <ul id="nav">
        <li class="selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div id="contains">
<div>111</div>
<div class="hide">222</div>
<div class="hide">333</div>
<div class="hide">444</div>
</div>

</div>

css部分：

        .tab{
            margin:0 auto;
            width:60%;
            height:300px;
            padding:0 0;
            border:1px solid #ccc;

            }
        #nav{

            height:30px;
            padding:0;
            margin:0;
            font-size: 0;
            cursor: pointer;
        }
        #nav li{
            padding:0;
            margin:0;
            display: inline-block;
            width:25%;
            line-height: 30px;
            text-align:center;
            list-style: none;

            background: #f3f3f3;
            font-size: 14px;
        }
        #nav .selected{

            background: #099;

        }

        #nav li:hover{

            background: #099;
        }
        #contains {
            text-align: center;
            padding:20px 0;
        }
        .hide{
            display:none;

        }

主要實現方式：

• 原生javacsript實現

  源碼：

window.onload = function() {
    var Nav = document.getElementById("nav");
    var NavLi = nav.getElementsByTagName('li');
    var contains = document.getElementById("contains");
    var containsDiv = contains.getElementsByTagName("div");
    TabPanel(NavLi, containsDiv);
}
//設置處理的方法
function TabPanel(NavLi, containsDiv) {
    for (var i = 0; i < NavLi.length; i++) {
        NavLi[i].index = i;//指定當前元素的索引
        //點擊執行相應操作
        NavLi[i].onclick = function() {
            for (var j = 0; j < NavLi.length; j++) {
                //將li的css類設置爲空
                NavLi[j].className = "";
                //將bu不需要顯示內容的css類設置爲hide
                containsDiv[j].className = 'hide';
            }
            //將點擊的元素(當前li的css類設置爲selectedf)
            //並將需要顯示的內容設置爲可顯示（將相應的css類設置爲空）
            NavLi[this.index].className = "selected";
            containsDiv[this.index].className = "";
        }
    }
}

• jquery實現（相對於原生js，代碼更加簡介）

  源碼：

核心思想：
對每一個li執行遍歷，對點擊事件執行相應的方法，執行方法爲：判斷當前li的類是否爲“selected‘’，如果不是將當前li的css類設置爲”selected”,並將其同級元素（即其他的li）的css類設置爲空，否則，將其同級元素css類設置爲空。將要顯示的內容顯示，其他的隱藏。

$(document).ready(function() {
    $('#nav li').each(function() {
        $($(this).click(function() {
            if (!$(this).hasClass('selected')) {
                $(this).addClass('selected').siblings().removeClass();
            } else {
                $(this).siblings().removeClass();
            }
            var id = $(this).index();
            $('#contains').children().eq(id).show().siblings().hide();
        }))
    });
})

知識點：hasClass()查找包含某個類的元素
siblings()查找該元素的所有同胞元素
eq(index) 方法將匹配元素集縮減值指定 index 上的一個

• BootStrap實現：

參考我的博客：http://blog.csdn.net/u013076360/article/details/52891626