Posted in Javascript onSeptember 07, 2015
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下：
这是一款网页常用的TAB选项卡功能，无鼠标操作的时候它可以自动轮换，美化一般，看上去有些粗糙，有兴趣使用的朋友可以进行细致修饰，相信会更漂亮的。
运行效果如下图所示：
在线演示地址如下：
具体代码如下：
<!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>通用TAB-有自动轮换功能</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
list-style:none;
}
.cur {
color:#000;
background-color:#FFF;
}
.red {
font-size: 20px;
font-weight: bolder;
}
#lxfTab-click {
-moz-border-radius:5px;
background-color:#069;
width:600px;
overflow:hidden;
padding:2px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
#lxfTab-click .title {
color:#FFF;
}
#lxfTab-click .title li {
float:left;
padding:1px;
cursor:pointer;
width:40px;
margin:8px 0 8px 8px;
border:1px solid #FFF;
-moz-border-radius:5px;
text-align:center;
}
#lxfTab-click .content {
width:600px;
float:left;
}
#lxfTab-click .content li {
word-wrap:break-word;
background-color:#FFF;
padding:6px;
-moz-border-radius:5px;
width: 572px;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
-->
</style>
<script>
$(function() {
$("#lxfTab-click .title li:first").addClass("cur");
$("#lxfTab-click .content li:not(:first)").hide();
$("#lxfTab-click .title li").click(function() {
var index = $("#lxfTab-click .title li").index($(this));
$("#lxfTab-click .title li").removeClass("cur");
$(this).addClass("cur");
$("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
$(".now").text(index + 1);
});
/* 自动轮换*/
var i = -1;
//设置起始位置
var speed = 3000;
//设置轮换速度
var n = $("#lxfTab-click .title li").length - 1;
function autoroll() {
if(i >= n) {
i = -1;
}
i++;
$("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
$("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
timer = setTimeout(autoroll, speed);
};
/* 鼠标悬停即停止自动轮换 */
function stoproll() {
$("#lxfTab-click li").hover(function() {
clearTimeout(timer);
i = $(this).prevAll().length;
}, function() {
timer = setTimeout(autoroll, speed);
});
};
autoroll();
//执行自动轮换函数
stoproll();
//启动悬停功能
});
</script>
</head>
<body>
<div id="lxfTab-click">
<ul class="title">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
<div class="LRbutton">
<ul>
<li></li><li></li><li></li>
</ul>
</div>
<ul class="content">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
jquery实现通用的内容渐显Tab选项卡效果
- Author -
企鹅声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@