Home > Web Front-end > JS Tutorial > body text

Dynamic effect TAB tab jquery plug-in_jquery

WBOY
Release: 2016-05-16 18:05:10
Original
843 people have browsed it

Effect picture:
Dynamic effect TAB tab jquery plug-in_jquery
Dynamic effect TAB tab jquery plug-in

Copy code The code is as follows:





Untitled Document













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

作者:曾祥展
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template