简略的tab选项卡效果

简单的tab选项卡效果

这个东西本来不想写的，但是媳妇大人看不懂，解释了N遍还不行，索性写个文章记录下，供人参考。

首先我们来看下html

<div class="contentkey tab1">
    <div class="tab">
        <ul>
            <li class="key"><a href="#" class="a-tab">tab1</a></li>
            <li><a href="#" class="a-tab">tab2</a></li>
            <li><a href="#" class="a-tab">tab3</a></li>
            <li class="tab-end"><a href="#" class="a-tab">tab4</a></li>
        </ul>
    </div>
    <div class="itemList">
        <div class="item tab1">tab1内容</div>
        <div class="item tab2">tab2内容</div>
        <div class="item tab3">tab3内容</div>
        <div class="item tab4">tab4内容</div>
    </div>
</div>

这个结构不用解释把？算了还是解释下把。

首先一个总容器这个容器有个本身的class和表示下面显示哪项显示的class

然后是2个div表示tab和内容

好了我们看下css，具体选项卡长什么样子需要自己玩的呀 我下面那个比较丑......

/*reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td 
{ padding: 0; margin: 0; list-style: none; }
/*global*/
body { background-color: #f0f0f0; }
/* --布局开始-- */
#page { width: 960px; margin: 30px auto; }
#page .contentkey { width: 800px;  border: 1px solid #999; background-color: #f0f0f0; }
#page .contentkey .tab { }
#page .contentkey .tab ul { overflow: hidden; padding-left: 20px; border-bottom: 1px solid #999; }
#page .contentkey .tab ul li { float: left; width: 80px; border-left: 1px solid #999; text-align: center; height: 50px; line-height: 50px; }
#page .contentkey .tab ul li.tab-end { border-right: 1px solid #999; }
#page .contentkey .tab ul li.key a { background-color: #fff; margin-bottom: -1px; display: block; height: 100%; width: 100%; }
#page .contentkey .itemList { background-color: #fff; clear: both; }
#page .contentkey .itemList .item{display:none }
#page .contentkey.tab1 .itemList .item.tab1,
#page .contentkey.tab2 .itemList .item.tab2,
#page .contentkey.tab3 .itemList .item.tab3,
#page .contentkey.tab4 .itemList .item.tab4{display:block }

这个css需要解释下，应为媳妇就是这看不懂......

首先是

#page .contentkey .itemList .item{display:none }

这行表示所有的展示项默认都是隐藏的

然后是下面4行表示总容器下的某个是显示的这个需要js来控制总容器

#page .contentkey.tab1 .itemList .item.tab1,
#page .contentkey.tab2 .itemList .item.tab2,
#page .contentkey.tab3 .itemList .item.tab3,
#page .contentkey.tab4 .itemList .item.tab4{display:block }

最后我们来看下js，我用的是jquery

$(".a-tab").click(function () {
   var _this = $(this), _parent = _this.closest(".contentkey");
   _parent.attr("class", "contentkey " + _this.html().trim())
   _parent.find(".key").removeClass("key");
   _this.closest("li").addClass("key");
})

讲下脚本思路，这个脚本写的比较戳，其实理解思路就可以了
主要就是移除顶级容器表示展示哪项的class移除，加上现在需要显示那项的class对应css就可以了
这样玩就是多个选项卡 一个脚本就可以了 当然这是在不涉及业务逻辑的情况下，看看下面有3个选项卡在页面上一个脚本也不会有什么冲突

<div class="contentkey tab1">
    <div class="tab">
        <ul>
            <li class="key"><a href="#" class="a-tab">tab1</a></li>
            <li><a href="#" class="a-tab">tab2</a></li>
            <li><a href="#" class="a-tab">tab3</a></li>
            <li class="tab-end"><a href="#" class="a-tab">tab4</a></li>
        </ul>
    </div>
    <div class="itemList">
        <div class="item tab1">tab1内容</div>
        <div class="item tab2">tab2内容</div>
        <div class="item tab3">tab3内容</div>
        <div class="item tab4">tab4内容</div>
    </div>
</div>
<div class="contentkey tab1">
    <div class="tab">
        <ul>
            <li class="key"><a href="#" class="a-tab">tab1</a></li>
            <li><a href="#" class="a-tab">tab2</a></li>
            <li><a href="#" class="a-tab">tab3</a></li>
            <li class="tab-end"><a href="#" class="a-tab">tab4</a></li>
        </ul>
    </div>
    <div class="itemList">
        <div class="item tab1">tab1内容</div>
        <div class="item tab2">tab2内容</div>
        <div class="item tab3">tab3内容</div>
        <div class="item tab4">tab4内容</div>
    </div>
</div>
<div class="contentkey tab1">
    <div class="tab">
        <ul>
            <li class="key"><a href="#" class="a-tab">tab1</a></li>
            <li><a href="#" class="a-tab">tab2</a></li>
            <li><a href="#" class="a-tab">tab3</a></li>
            <li class="tab-end"><a href="#" class="a-tab">tab4</a></li>
        </ul>
    </div>
    <div class="itemList">
        <div class="item tab1">tab1内容</div>
        <div class="item tab2">tab2内容</div>
        <div class="item tab3">tab3内容</div>
        <div class="item tab4">tab4内容</div>
    </div>
</div>