jquery实现通用的内容渐显Tab选项卡效果
更新时间：2015年09月07日 16:17:46 作者：企鹅
这篇文章主要介绍了jquery实现通用的内容渐显Tab选项卡效果,涉及jquery通过时间函数定时触发页面元素样式变换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下：
这是一款网页常用的TAB选项卡功能，无鼠标操作的时候它可以自动轮换，美化一般，看上去有些粗糙，有兴趣使用的朋友可以进行细致修饰，相信会更漂亮的。
运行效果如下图所示：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/
具体代码如下：
<!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实现简单手风琴菜单效果的方法,实例分析了jQuery操作页面样式、html页面布局及SCSS样式设置的相关技巧,需要的朋友可以参考下2015-06-06
通过jQuery实现页面内锚点平滑跳转的方法很多，可以通过插件hovertreescroll实现，也可以简单的通过animate方法实现，下面介绍这2种比较简单的方法。2015-05-05
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下2016-02-02
本篇文章主要是对防止jQuery ajax Load使用缓存的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
firefox下jquery iframe刷新页面提示会导致重复之前动作
刷新页面会提示要显示此页面， Firefox 必须发送将会导致重复之前动作的数据,此问题很是疑惑,接下来将为您解答，需要的朋友可以了解下2012-12-12
下面链接中是我用jQuery的扩展来实现的表格分页和排序，使用这个扩展必须加上表头<thead>和<tbody>标签，因为我是 通过<tbody>来进行分页的，要是不加thead，那么表头也要作为分页计算时的一个行了。2011-03-03
这篇文章主要详解了jquery事件delegate(）的使用方法，delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，感兴趣的小伙伴们可以参考一下2016-01-01
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts实现的MSBar3D图效果,结合完整实例形式分析了jQuery使用FusionCharts载入xml数据绘制MSBar3D图的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03
图片滚动效果想必大家都已司空见惯了吧，接下来本文介绍下jQuery+CSS实现图片滚动，感兴趣的你可不要错过了哈，希望可以帮助到你2013-03-03
下面小编就为大家带来一篇jq给页面添加覆盖层遮罩的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论