简单的选项卡DEMO

fe, demo

给初学JS的老哥写了一个很简单的选项卡DEMO，配上最通俗易懂的注释;这是DEMO /demo/tab.html

<!doctype html>
<html>
<head>
<title>简易选项卡DEMO</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style>
*{
    margin:0px;
    padding:0px;
}
.clearfix:after {
    content:'\20';
    display:block;
    height:0;
    clear:both;
}
.clearfix {
    zoom:1;
}

.wrapper{
    width:500px;
    border:1px solid #dfdfdf;
}
.wrapper .tab-nav{
    background: #efefef;
    border-bottom: 1px solid #dfdfdf;
}
.wrapper .tab-nav-list{
    display: block;
    float:left;
    height:30px;
    width:160px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition:.3s;
}
.wrapper .tab-nav-list:hover{
    background: #dddddd;
}

.wrapper .tab-content{
    display:none;
    line-height: 30px;
    padding-left: 30px;
}
.wrapper .tab-content.active{
    display:block;
}
</style>
</head>
<body>
    <div class="wrapper">

        <div class="tab-nav clearfix">
            <ul class="tab-ul clearfix" id="tabNav">
                <li class="tab-nav-list" data-tab="a">选项一</li>
                <li class="tab-nav-list" data-tab="b">选项二</li>
                <li class="tab-nav-list" data-tab="c">选项三</li>
            </ul>
        </div>

        <div class="tab-wrapper" id="tabWrapper">
            <ul class="tab-content active" data-tab="a">
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
                <li>测试一测试一测试一测试一测试一测试一测试…</li>
            </ul>
            <ul class="tab-content" data-tab="b">
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
                <li>测试二测试二测试二测试二测试二测试二测试…</li>
            </ul>
            <ul class="tab-content" data-tab="c">
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
                <li>测试三测试三测试三测试三测试三测试三测试…</li>
            </ul>
        </div>
    </div>
<script>

$('#tabNav').mouseover(changeView)
//$('#tabNav')为获取id="tabNav"的标签
//对id="tabNav"的节点绑定mouseover(鼠标浮动在标签上的时候)事件
//事实上 $('#tabNav').mouseover() 就是一个函数，函数的参数也是一个function: 即下面的changeView函数；mouseover()会传递一个event（事件对象），该event包括：具体在哪一个标签节点上，鼠标此时的位置等等

//顺便说一下，如果不想在鼠标浮动在标签上就切换，而是想在点击的时候才切换可以使用click方法：
//就像这样：$('#tabNav').click(changeView)

function changeView(event){
//该方法的参数是event,也就是鼠标浮动的当时状态的一个对象，包括：具体在哪一个标签节点上，鼠标此时的位置等等
    var target = event.target,//获取鼠标此时正在具体哪一个标签上，对应的为<li class="tab-nav-list" data-tab="a">选项一</li> ，或 <li class="tab-nav-list" data-tab="b">选项二</li> ， 或 <li class="tab-nav-list" data-tab="c">选项三</li> 

        curTab = $(target).attr('data-tab');//获取该标签的data-tab属性，这并不是一个标签的常用属性，而是用来标记该标签的自定义属性

    if(curTab){//如果此时鼠标浮动的标签有data-tab属性的话就执行下面的语句

        var tabs = $('#tabWrapper .tab-content'),//获取所有的选项卡,类似于CSS中的#tabWrapper .tab-content ,这是一个数组

            $tab;

        for(var i=0;i<tabs.length;i++){
            //用一个for循环来获取所有的选项卡，一一做处理
            //处理的原理很简单：如果当前选项的data-tab属性等于刚刚获取到的选项卡data-tab属性的话，就给他加一个active类；如果不等于的话就把它的active类去掉
            //在最上面的CSS声明中有一个类.class{display:none}
            //这样就可以做到：对鼠标选中的类加上active属性，对鼠标没有选中的类删除active从而做到了想要隐藏的就隐藏，想要展现的就展现的目的

            if($(tabs[i]).attr('data-tab') == curTab){
            //$(tabs[i])就是for循环中单一循环体，用来判断它的data-tab属性是否等于刚刚鼠标浮动在tab上的data-tab属性
                $(tabs[i]).addClass('active')
            }else{                
                $(tabs[i]).removeClass('active')
            }

        }
    }

}
</script>
</body>
</html>