tabs自动切换功能的实现

时间 2021-01-12

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>
<style type="text/css">
.tab .nav-tabs {
border-bottom: 0 none;
background: #eaeaea;
}
.tab .nav-tabs li a {
background: transparent;
border-radius: 0;
font-size: 16px;
border: none;
color: #333;
padding: 12px 22px;
}
.tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {
border: 0 none;
background:#e67e22;
color: #fff;
}
.tab .nav-tabs li.active a:after {
content: "";
position: absolute;
left: 45%;
bottom: -14px;
border: 7px solid transparent;
border-top: 7px solid #e67e22;
}
.tab .tab-content {
padding: 5px;
color: #5a5c5d;
font-size: 14px;
line-height: 20px;
margin-top: 5px;
border-bottom: 1px solid #e67e22;
}
@media only screen and (max-width: 480px) {
.tab .nav-tabs, .tab .nav-tabs li {
width: 100%;
background: transparent;
}
.tab .nav-tabs li.active a {
border-radius: 10px 10px 0 0;
}
.tab .nav-tabs li:first-child a {
border-bottom-left-radius: 0;
}
.tab .nav-tabs li a {
margin-bottom: 10px;
border: 1px solid lightgray;
}
.tab .nav-tabs li.active a:after {
border: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="tab" role="tabpanel">

<ul class="nav nav-tabs" role="tablist" style="margin-top:0px;" id="docTabs">
<li role="presentation" class="active"><a href="#Section_new"
aria-controls="home" role="tab" data-toggle="tab"> 最新</a>
<li role="presentation"><a href="#Section_week"
aria-controls="profile" role="tab" data-toggle="tab">7天热门</a>
<li role="presentation"><a href="#Section_month"
aria-controls="messages" role="tab" data-toggle="tab">30天热门</a>
</ul>


<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="Section_new">
<P>
tab1中的内容
</P>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section_week">
<P>
tab2中的内容
</P>
</div>
<div role="tabpanel" class="tab-pane fade" id="Section_month">
<P>
tab3中的内容
</P>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function timer(i)
{
interval=setInterval(function()
{
$("#docTabs li:eq("+i+") a").tab('show');
i++;
if(i>2)
i=0;
},2000);//为了演示需要，间隔时间改为2秒
return interval;
}
$(function(){
var i=0;
interval=timer(i);
$(".tab-pane").mouseover(function(){
clearInterval(interval);
});
$(".tab-pane").mouseout(function(){
timer(i);
});
});
</script>
</body>
</html>

tabs自动切换功能的实现

文章列表中列出的最新、7天热门、30天热门这三个选项卡每隔5秒钟自动切换，当鼠标悬停到某选项卡的时候，则暂停轮换，移开后，继续切换。代码设计思路如下：

设置一个定时器timer()，每隔5秒钟对标签页进行切换一次。
在网页加载完以后就运行该定时器。
当用户鼠标悬停到某个标签页上时，清除该（clearInterval）定时器。
鼠标移开后，继续使用定时器。

//tabs自动轮换
function timer(i)
{
interval=setInterval(function()
{
$("#docTabs li:eq("+i+") a").tab('show');
i++;
if(i>2)
i=0;
}
,5000);
return interval;
}
$(function(){
var i=0;
interval=timer(i);
//当鼠标悬停在列表区域时暂停轮换
$(".tab-pane").mouseover(function(){
clearInterval(interval);
});
//鼠标移开时继续轮换
$(".tab-pane").mouseout(function(){
timer(i);
});
});

开发Jquery tab升级

<script src="/scripts/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="indexbooks">
<h4 class="title" style="padding-bottom:10px;">
图书
<ul style="float:right;font-size:14px;" id="booksfilter">
<li><a href="javascript:void(0);" class="cur">入门</a><span>|</span></li>
<li><a href="javascript:void(0);">实战</a><span>|</span></li>
<li><a href="javascript:void(0);">进阶</a><span>|</span></li>
</ul>
</h4>
<div class="row">
<div class="booklist">

<div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://www.dqiu.net/uploads/146855238081016.jpg">
</a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Node入门 </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">2推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s1039608.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
LINUX权威指南（... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s10170467.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
锋利的jQuery(... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s26269848.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Sams Teach... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="/book/577e05d757b0c" target="_blank">
<img style="height:130px;" src="http://www.dqiu.net/uploads/146787664243893.jpg">
</a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
ThinkPHP5快... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s4671751.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
DIV+CSS网站布... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">5推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s7654166.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
PHP完全自学手册（... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">4推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s6080118.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
细说PHP（pdf可... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">5推荐</span></p>
</div>
</div>
</div></div>
<div class="booklist" style="display:none;">

<div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s27179181.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Linux Shel... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s28020259.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
微信公众平台开发基础... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">4推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s28058478.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Bootstrap实... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s25137429.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
jQuery UI开... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">2推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s27347131.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Bootstrap用... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">2推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s10111843.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
精通ASP.NET2... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://www.dqiu.net/uploads/141437969040936.gif">
</a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
Fireworks ... </a></h5>
<p style="text-align:center;">
评论(1) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://www.dqiu.net/uploads/141109524640207.jpg">
</a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
PHP MVC开发实... </a></h5>
<p style="text-align:center;">
评论(7) <span class="badge">6推荐</span></p>
</div>
</div>
</div></div>
<div class="booklist" style="display:none;">

<div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s27508138.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
精通AngularJ... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.doubanio.com/mpic/s27255846.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
iOS开发指南... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://www.dqiu.net/uploads/146787693051030.jpg">
</a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
ThinkPHP5.... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s4692124.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
MongoDB权威指... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s5860151.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
JavaScript... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">0推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s5952772.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
正则表达式入门经典（... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s5893432.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
计算机数学基础... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">3推荐</span></p>
</div>
</div>
</div><div class="col-xs-3">
<div class="thumbnail" style="height:220px; border-width:0px;">
<a href="javascript:void(0)" target="_blank">
<img style="height:130px;" src="http://img3.douban.com/mpic/s3350961.jpg"> </a>
<div class="caption">
<h5 style="text-align:center;">
<a href="javascript:void(0)" target="_blank">
集体智慧编程... </a></h5>
<p style="text-align:center;">
评论(0) <span class="badge">1推荐</span></p>
</div>
</div>
</div></div>
</div>
</div>
<script type="text/javascript">
$(function()
{
$('#booksfilter a').each(function(i)
{//对每个tabs中的标签添加点击（click）事件的处理函数

$(this).click(function(){
$(this).addClass('cur');
$(this).parent().siblings().find('a').removeClass('cur');//删除其他任何选项的cur类
$('.booklist').eq(i).show();//显示本节点
$('.booklist').eq(i).siblings().hide();//隐藏兄弟节点
})

});

});
</script>
</body>
</html>

<script src="/scripts/jquery.min.js"></script>

});

});</script></body></html>