Dynamic effect TAB tab jquery plug-in_jquery-JS Tutorial-php.cn

Effect picture:

Dynamic effect TAB tab jquery plug-in

Copy code The code is as follows:

Untitled Document

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

作者：曾祥展

Related labels：

TAB选项卡

source：php.cn

Previous article：Beginner's js insert node appendChild insertBefore usage method_javascript skills Next article：Summary of several ways to obtain elements in jquery_jquery

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