Dynamic effect TAB tab jquery plug-in_jquery

Effect picture:

Dynamic effect TAB tab jquery plug-in

Copy code The code is as follows:

• You are gril


• I am boy

I am in Shangri-La
< ;/div>

Hehe

Style:

Copy code The code is as follows:

@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("

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

作者：曾祥展

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Beginner's js insert node appendChild insertBefore usage method_javascript skillsNext article：Beginner's js insert node appendChild insertBefore usage method_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills