【锋利的JQuery-学习笔记】Tab选项卡的实现

2020-11-24 07:07

阅读:788

标签:style   blog   class   code   java   ext   

效果图:

soscw.com,搜素材

关键点:

     1.标签和标签内容都是用

  • 实现的,主要是通过Css样式设计成选项卡的模样。

         2.用js代码实现点击标签时,标签内容的切换(做法是

    横向滚动)。

     

    html:

    soscw.com,搜素材
                    div id="jnBrand">
                        div id="jnBrandTab">
                            h2 title="品牌活动">品牌活动h2>
                            ul>
                                li>a title="运动" href="#nogo">运动a>li>
                                li>a title="女鞋" href="#nogo">女鞋a>li>
                                li>a title="男鞋" href="#nogo">男鞋a>li>
                                li>a title="Applife" href="#nogo">童鞋a>li>
                            ul>
                        div>
                        div id="jnBrandContent">
                            div id="jnBrandList">
                                ul>
                                    li>
                                        a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
                                        span>a href="###1">耐克a>span>
                                    li>
                                    li>
                                        a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
                                        span>a href="###2">阿迪达斯a>span>
                                    li>
                                    li>
                                        a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
                                        span>a href="###3">李宁a>span>
                                    li>
                                    li>
                                        a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
                                        span>a href="###4">安踏a>span>
                                    li>
                                    li>
                                        a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
                                        span>a href="###1">耐克a>span>
                                    li>
                                    li>
                                        a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
                                        span>a href="###2">阿迪达斯a>span>
                                    li>
                                    li>
                                        a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
                                        span>a href="###3">李宁a>span>
                                    li>
                                    li>
                                        a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
                                        span>a href="###4">安踏a>span>
                                    li>
                                    li>
                                        a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
                                        span>a href="###1">耐克a>span>
                                    li>
                                    li>
                                        a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
                                        span>a href="###2">阿迪达斯a>span>
                                    li>
                                    li>
                                        a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
                                        span>a href="###3">李宁a>span>
                                    li>
                                    li>
                                        a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
                                        span>a href="###4">安踏a>span>
                                    li>
                                    li>
                                        a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
                                        span>a href="###1">耐克a>span>
                                    li>
                                    li>
                                        a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
                                        span>a href="###2">阿迪达斯a>span>
                                    li>
                                    li>
                                        a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
                                        span>a href="###3">李宁a>span>
                                    li>
                                    li>
                                        a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
                                        span>a href="###4">安踏a>span>
                                    li>
                                ul>
                            div>
                        div>
                    div>
    soscw.com,搜素材

     

    css:

    soscw.com,搜素材
    /* 品牌活动 */
    #jnBrand {
        float: left;
        height: 230px;
        margin: 10px 0 0;
        overflow: hidden;
        width: 790px;
    }
    #jnBrandTab {
        border-bottom: 1px solid #E4E4E4;
        height: 29px;
        position: relative;
        width: 790px;
        float: left;
    }
    #jnBrandTab h2 {
        height: 29px;
        line-height: 29px;
        left: 0;
        position: absolute;
        width: 100px;
    }
    #jnBrandTab ul {
        position: absolute;
        right: 0;
        top: 10px;
    }
    #jnBrandTab li {
        float: left;
        margin: 0 10px 0 0;
    }
    #jnBrandTab li a {
        background-color: #E4E4E4;
        color: #000000;
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    #jnBrandTab .chos {
        background: url("../images/chos.gif") no-repeat scroll 50% bottom transparent;
        padding-bottom: 3px;
    }
    #jnBrandTab .chos a {
        background-color: #FA5889;
        color: #FFFFFF;
        outline: 0 none;
    }
    #jnBrandContent {
        float: left;
        height: 188px;
        overflow: hidden;
        margin: 8px 5px;
        width: 790px;
        position: relative;
    }
    #jnBrandList {
        position: absolute;
        left: 0;
        top: 0;
        width: 3200px;
    }
    #jnBrandContent li {
        float: left;
        height: 188px;
        overflow: hidden;
        padding: 0 5px;
        position: relative;
        width: 185px;
    }
    #jnBrandContent li img {
        left: 5px;
        position: absolute;
        top: 0;
    }
    #jnBrandContent li span {
        background-color: #EFEFEF;
        bottom: 0;
        color: #666666;
        display: inline-block;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        position: absolute;
        text-align: center;
        width: 183px;
    }
    #jnBrandContent li a {
        color:#666666;
    }
    #jnBrandContent li a:hover{
        color: #008CD7;
        text-decoration: none;
    }
    soscw.com,搜素材
    "../images/chos.gif"是:soscw.com,搜素材
    (下载:soscw.com,搜素材

    js:

    soscw.com,搜素材
    $(function () {
        $("#jnBrandTab li a").click(function () {
            $(this).parent().addClass("chos")
                .siblings().removeClass("chos");
    
            var index = $("#jnBrandTab li a").index(this);
            showBrandContent(index);
    
            return false;
        }).eq(0).click();
    });
    
    //父标签横向滚动,以显示不同的tab标签页(子标签)
    function showBrandContent(index) {
        var $rollobj = $("#jnBrandList");
    
        /*
        outerWidth(options)
                获取第一个匹配元素外部宽度(默认包括补白和边框)。
            此方法对可见和隐藏元素均有效。
            返回值:Integer
            参数:
            options(Boolean) : (false) 设置为 true 时,计算边距在内。
            示例:
            获取第一段落外部宽度。
        */
        var rollWith = $rollobj.find("li").outerWidth();
        rollWith *= 4; //一个版面的宽度
    
        $rollobj.stop(true, true)//清空所有动画和将未完成的动画抵达动画结束状态
            .animate({left: -rollWith * index},600);
    }
    soscw.com,搜素材

     

    【锋利的JQuery-学习笔记】Tab选项卡的实现,搜素材,soscw.com

    【锋利的JQuery-学习笔记】Tab选项卡的实现

    标签:style   blog   class   code   java   ext   

    原文地址:http://www.cnblogs.com/easy5weikai/p/3703822.html


评论


亲,登录后才可以留言!