动感效果的TAB选项卡 jquery 插件

最新推荐文章于 2024-04-12 13:28:13 发布

a771948524

最新推荐文章于 2024-04-12 13:28:13 发布

阅读量1.2k

点赞数

分类专栏： web Jquery

web 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

Jquery

23 篇文章 2 订阅

订阅专栏

动感效果的TAB选项卡 jquery 插件 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link  href="tab.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="tab.js"></script>

<script type="text/javascript">

$(function() {


 zeng.tab.init();

});

</script>

</head>


<body>

<div class="clearfix" id="hot">

  <div class="main_l tab">

    <div class="main_title clearfix">

      <ul class="fx">

        <li class="on"><a href="#">你是gril</a></li>

        <li class="">我是boy</li>

      </ul>

    </div>

    <div class="t">

      <div class="main_content clearfix">

      我在香格里拉

      </div>

    </div>

    <div class="t none">

      <div class="main_content clearfix">

    呵呵

      </div>

    </div>

  </div>

</div>

</body>

</html>


 
 
 
样式： 


@charset "utf-8";

/* CSS Document */


#hot {

height: 565px;

overflow: hidden;

}


.clearfix {

display: block;

}

.clearfix::after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

ul {

    list-style: none outside none;

}

body {

    line-height: 1.5;

}

a, a:link, a:visited {

    color: #333333;

    text-decoration: none;

}

a:hover {

    color: #FF6600;

    text-decoration: none;

}


.main {

    padding: 0 10px 0 167px;

    position: relative;

    width: 823px;

}

.main_l {

    float: left;

    position: relative;

    width: 513px;

}

.main_r {

    float: right;

    position: relative;

    width: 300px;

}

.main_title {

    background: url("images/s.png") no-repeat scroll 0 0 transparent;

    float: left;

    height: 28px;

    overflow: hidden;

}

.main_title ul {

    font-size: 14px;

}

.main_title ul li {

    background: none repeat scroll 0 0 #F1F1F1;

    border-left: 1px solid #FFFFFF;

    border-right: 1px solid #FFFFFF;

    border-top: 3px solid #FFFFFF;

    float: left;

    height: 23px;

    line-height: 23px;

    padding-left: 16px;

    padding-right: 16px;

    padding-top: 1px;

}

.main_title ul .on {

    background: none repeat scroll 0 0 #FFFFFF;

    border-color: #009AD9 #009AD9 #FFFFFF;

    border-style: solid;

    border-width: 4px 1px 1px;

    height: 22px;

    line-height: 22px;

    padding-left: 16px;

    padding-right: 16px;

}

.main_title ul .on a {

    font-weight: 700;

}

.main_title span {

    float: right;

    line-height: 24px;

    padding-right: 10px;

    padding-top: 4px;

}


.main_l .main_title {

    overflow: hidden;

    width: 513px;

}

.main_l .main_content {

    width: 513px;

}



.tab div.t.none {

    display: none;

}

.tab .main_title ul.fx li, #link .main_l .main_title ul.fx li {

    background-color: transparent;

}

.tab .main_title ul.fx li, .tab .main_title ul.fx li.on {

    border-top: 0 none;

    margin-top: -8px;

    padding-top: 0;

}

.tab .main_title ul.fx li.on {

    border-bottom-width: 0;

    border-left-color: transparent;

    border-right-color: transparent;

}

.tab .main_title ul.fx {

    position: relative;

    z-index: 20;

}

.tab .main_title div.animate {

    background-color: #FFFFFF;

    border-color: #009AD9 #009AD9 #FFFFFF;

    border-style: solid;

    border-width: 4px 1px 1px;

    height: 23px;

    position: absolute;

    top: 0;

}
 
 
 
 
 
 
 
tab选项卡 源代码：
 
 
 /*

 * tab 1.0

 * Date: 2011-07-09 15:29

 * http://zengxiangzhan.cnblogs.com/

 */


var zeng = zeng || {};

zeng.tab = {

    t: null,

    delayTime: 150,

    fx: true,

    tab: function(b) {

        $(b).siblings().removeClass("on");

        $(b).addClass("on");

        var c = $(b).parents(".tab").find("div.t");

        var a = c.eq($(b).index());

        c.addClass("none");

        a.removeClass("none");

        if (this.fx) {

            if ($(b).parent().hasClass("nofx")) {

                return

            }

            $(b).parent().siblings(".animate").width($(b).outerWidth() - 2).animate({

                left: $(b).position().left

            }, "slow")

        }

    },

    delayTab: function(b, a) {

        clearTimeout(b.t);

        this.t = setTimeout(function() {

            b.tab(a)

        }, this.delayTime)

    },

    init: function() {

        var a = this;

        a.animate();

        if (window.Touch) {

            $(".tab .main_title>ul>li[class!='on']>a").click(function() {

                return false

            })

        }

        $(".tab .main_title>ul>li,.tab>ul.hotread_menu>li").hover(function() {

            a.delayTab(a, this)

        }, function() {

            clearTimeout(a.t)

        })

    },

    animate: function() {

        if (!this.fx) {

            return

        }

        $(".tab .main_title>ul").each(function() {

            if (!$(this).hasClass("nofx")) {

                $(this).addClass("fx")

            }

        });

        $(".tab .main_title").each(function(a, b) {

            if ($(this).find("ul").hasClass("nofx")) {

                return

            }

            $(b).append("<div class='animate' ></div>");

            $(b).find(".animate").width($(b).find("ul>li.on").outerWidth() - 2).css("left", $(b).find("ul>li.on").position().left)

        })

    }

};