首页 > 代码库 > 【锋利的JQuery-学习笔记】Tab选项卡的实现

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

2024-07-02 14:33:56   232人阅读

效果图：

关键点：

     1.标签和标签内容都是用<ul><li>实现的，主要是通过Css样式设计成选项卡的模样。

     2.用js代码实现点击标签时，标签内容的切换（做法是<div id="jnBrandList">横向滚动）。

 

html：

                <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>

 

css：

/* 品牌活动 */
#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;
}
"../images/chos.gif"是：
（下载：    ）

js：

$(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);
}

 


联系
我们