左侧竖向选项卡导航栏

62 阅读 0 评论 41 点赞

我是靠谱客的博主轻松蜗牛，最近开发中收集的这篇文章主要介绍左侧竖向选项卡导航栏，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

模仿唯品会的一个竖向导航栏选项卡,效果图：

html代码

<div id="TabMain">
    <div class="tabItemContainer">
        <li><a class="tabItemCurrent">裙装/套装</a></li>
        <li><a>女上装</a></li>
        <li><a>女夏装</a></li>
        <li><a>女式外套</a></li>
        <li><a>服装配件</a></li>
    </div>
    <div class="tabBodyContainer">
        <div class="tabBodyItem tabBodyCurrent">
            <div class="s1">
                <img src="../img/11.png">
                <span>连衣裙</span>
            </div>
            <div class="s1">
                <img src="../img/12.png">
                <span>套装</span>
            </div>
            <div class="s1">
                <img src="../img/13.png">
                <span>条纹/印花裙</span>
            </div>
            <div class="s1">
                <img src="../img/14.png">
                <span>纯色连衣裙</span>
            </div>
            <div class="s1">
                <img src="../img/15.png">
                <span>蕾丝连衣裙</span>
            </div>
            <div class="s1">
                <img src="../img/16.png">
                <span>小黑裙</span>
            </div>
            <div class="s1">
                <img src="../img/17.png">
                <span>半身裙</span>
            </div>
            <div class="s1">
                <img src="../img/18.png">
                <span>A字裙</span>
            </div>
            <div class="s1">
                 <img src="../img/19.png">
                <span>百褶裙</span>
            </div>   
        </div>
        <div class="tabBodyItem">
            <div class="s1">
                <img src="../img/21.png">
                <span>T恤</span>
            </div>
            <div class="s1">
                <img src="../img/22.png">
                <span>衬衫</span>
            </div>
            <div class="s1">
                <img src="../img/23.png">
                <span>针织衫</span>
            </div>
            <div class="s1">
                <img src="../img/24.png">
                <span>卫衣</span>
            </div>
            <div class="s1">
                <img src="../img/25.png">
                <span>马夹</span>
            </div>
            <div class="s1">
                <img src="../img/26.png">
                <span>毛衣</span>
            </div>
        </div>
        <div class="tabBodyItem">
           <div class="s1">
                <img src="../img/31.png">
                <span>休闲裤</span>
            </div>
            <div class="s1">
                <img src="../img/32.png">
                <span>牛仔裤</span>
            </div>
            <div class="s1">
                <img src="../img/33.png">
                <span>阔腿裤</span>
            </div>
            <div class="s1">
                <img src="../img/34.png">
                <span>背带裤</span>
            </div>
            <div class="s1">
                <img src="../img/35.png">
                <span>小脚裤</span>
            </div>
            <div class="s1">
                <img src="../img/36.png">
                <span>打底裤</span>
            </div>
            <div class="s1">
                <img src="../img/37.png">
                <span>连体裤</span>
            </div>
        </div>
        <div class="tabBodyItem">
          <div class="s1">
                <img src="../img/41.png">
                <span>外套</span>
            </div>
            <div class="s1">
                <img src="../img/42.png">
                <span>风衣</span>
            </div>
            <div class="s1">
                <img src="../img/43.png">
                <span>小西装</span>
            </div>
            <div class="s1">
                <img src="../img/44.png">
                <span>夹克</span>
            </div>
            <div class="s1">
                <img src="../img/45.png">
                <span>大衣</span>
            </div>
            <div class="s1">
                <img src="../img/46.png">
                <span>皮衣皮草</span>
            </div>
            <div class="s1">
                <img src="../img/47.png">
                <span>棉衣</span>
            </div>
            <div class="s1">
                <img src="../img/18.png">
                <span>羽绒服</span>
            </div>
        </div>
        <div class="tabBodyItem">
            <div class="s1">
                <img src="../img/51.png">
                <span>围巾/披肩</span>
            </div>
            <div class="s1">
                <img src="../img/52.png">
                <span>帽子</span>
            </div>
            <div class="s1">
                <img src="../img/53.png">
                <span>头巾/方巾</span>
            </div>
            <div class="s1">
                <img src="../img/54.png">
                <span>丝巾</span>
            </div>
            <div class="s1">
                <img src="../img/55.png">
                <span>腰带</span>
            </div>
        </div>
    </div>
</div>

css代码

<style type="text/css">
#TabMain {
    width: 1000px;
    height: 300px;
    margin: 0 auto;
    margin-top: 100px;
}
#TabMain img{
    width: 80px;
    height: 110px;
    margin: 0 auto;
    position: absolute;
    margin-left: 16%;
}
#TabMain img:hover{
    opacity: 0.8;
    cursor: pointer;
}
.s1 span{
    position:absolute;
    bottom: 15px;
    margin: 0 auto;
    color:#ff6f8a;
    left: 50%;
    margin-left: -50px;
}
.s1 span:hover{
    cursor: pointer;
}
.s1
{
    left: 20px;
    width: 180px;
    margin: 0 auto;
    height: 150px;
    float: left;
    position:relative;
}
.tabItemContainer {
    width: 100px;
    height: 298px;
    float: left;
    margin-top:2px;
    border: 1px solid #ff6f8a;
}
.tabBodyContainer {
    margin-top:2px;
    width: 890px;
    height: 298px;
    float: left;
    background-color: #fff;
    border: 1px solid #ff6f8a;
    margin-left: 1px;
}
.tabItemContainer>li{
    list-style: none;
    text-align: center;
     position:relative;

}
.tabItemContainer>li>a {
     margin-top:1px;
    background-color:#ff6f8a;
    float: left;
    width: 100%;
    padding: 18px 0 18px 0;
    font: 16px "微软雅黑", Arial, Helvetica, sans-serif;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    border:1px solid transparent;
}
.tabItemCurrent{
    color:#ff6f8a !important;
    background-color: #fff !important;
    position: relative;
}
.tabItemContainer>li>a:hover {
    background-color: #fff;
    color:#ff6f8a;
}
.tabBodyItem {
    position: absolute;
    width: 677px;
    height: 500px;
    display: none;
}
.tabBodyItem>p {
    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 30px;
}
.tabBodyItem>p>a {
    text-decoration: none;
    color: #0F3;
}
.tabBodyCurrent{
    width:950px;
    display:block;
}
</style>

Jquery代码

<script type="text/javascript">
    var SidebarTabHandler={
    Init:function(){
        $(".tabItemContainer>li").click(function(){
            $(".tabItemContainer>li>a").removeClass("tabItemCurrent");
            $(".tabBodyItem").removeClass("tabBodyCurrent");
            $(this).find("a").addClass("tabItemCurrent");
            $($(".tabBodyItem")[$(this).index()]).addClass("tabBodyCurrent");
        });
    }()
}
</script>

代码比较简单，就是利用Jquery的removeClass和addClass属性方法，改变当前显示的div，并且使用display:none，使当前不显示的div隐藏。

display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。