码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-05-02 14:01:12      阅读:453      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

效果图:

bubuko.com,布布扣

关键点:

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

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

 

html:

bubuko.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>
bubuko.com,布布扣

 

css:

bubuko.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;
}
bubuko.com,布布扣
"../images/chos.gif"是:bubuko.com,布布扣
(下载:bubuko.com,布布扣

js:

bubuko.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);
}
bubuko.com,布布扣

 

【锋利的JQuery-学习笔记】Tab选项卡的实现,布布扣,bubuko.com

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

标签:style   blog   class   code   java   ext   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!