选项卡的实现方式

本文主要介绍选项卡的实现：原生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