tabs自動切換功能的實現

時間  2019-12-13
標籤 tabs 自動 切換 功能 實現 简体版
原文   原文鏈接

<html>
<head>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">javascript

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>css

<!-- Bootstrap 核心 JavaScript 文件 -->
<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">
<!-- Nav tabs -->
<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>
<!-- Tab panes -->

<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>html

 

tabs自動切換功能的實現

文章列表中列出的最新、7天熱門、30天熱門這三個選項卡每隔5秒鐘自動切換，當鼠標懸停到某選項卡的時候，則暫停輪換，移開後，繼續切換。代碼設計思路以下：java

  1. 設置一個定時器timer()，每隔5秒鐘對標籤頁進行切換一次。
  2. 在網頁加載完之後就運行該定時器。
  3. 當用戶鼠標懸停到某個標籤頁上時，清除該（clearInterval）定時器。
  4. 鼠標移開後，繼續使用定時器。
  1. //tabs自動輪換
  2. function timer(i)
  3. {
  4. interval=setInterval(function()
  5. {
  6. $("#docTabs li:eq("+i+") a").tab('show');
  7. i++;
  8. if(i>2)
  9. i=0;
  10. }
  11. ,5000);
  12. return interval;
  13. }
  14. $(function(){
  15. var i=0;
  16. interval=timer(i);
  17. //當鼠標懸停在列表區域時暫停輪換
  18. $(".tab-pane").mouseover(function(){
  19. clearInterval(interval);
  20. });
  21. //鼠標移開時繼續輪換
  22. $(".tab-pane").mouseout(function(){
  23. timer(i);
  24. });
  25. });

開發Jquery tab升級

<html>
<head>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">jquery

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>正則表達式

<!-- Bootstrap 核心 JavaScript 文件 -->
<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<span class="badge">1推薦</span></p>
</div>
</div>
</div></div>
</div>
</div>
<script type="text/javascript">
$(function()
{
$('#booksfilter a').each(function(i)
{//對每一個tabs中的標籤添加點擊（click）事件的處理函數bootstrap

$(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>

 

 

 

<html>
<head>
<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">

<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>

<!-- Bootstrap 核心 JavaScript 文件 -->
<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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)&nbsp;<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>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程