參考自男丁格爾
<script>
$(function(){
$('#recommendWork').each(function(){
var $tabList =$(this).find('.tabs-nav'), //Tab list
$tabAnchors =$tabList.find('a') //Tab (link)
$tabPanels =$(this).find('.tabs-panel') //Panel
//點擊Tab時的處理
//接收作為參數的事件物件
$tabList.on('click','a',function(event){
//取消點擊 Link 時的預設動作
event.preventDefault();
//將點擊的頁次jQuery物件化
var $this = $(this)
//如果是目前的頁次,則不做處理
if($this.hasClass('active')){
return;
}
//去除所有頁次選取狀態
//將被點擊的頁次附加點擊狀態
$tabAnchors.removeClass('active');
$this.addClass('active');
//將所有頁次設定不顯示
//顯示被點擊頁次所對應的面版
$tabPanels.hide();
$($this.attr('href')).show();
});
//設定初始顯示頁次的狀態
$tabAnchors.eq(0).trigger('click');
})
})
//Tabs
</script>
<style>
.tabs-nav{
list-style:none;
padding: 0;
margin: 23px 0 0 0;
border-bottom: 1px solid #336699;
}
.tabsTitle .tabs-nav li{
border-bottom: 1px solid transparent;
border-radius: 5px 5px 0 0;
float: left;
position: relative;
font-size: 20px;
}
.tabsTitle .tabs-nav a{
display: bolck;
border-bottom: 1px solid transparent;
border-radius: 5px 5px 0 0;
padding: 8px 15px 3px 15px;
position: relative;
text-decoration: none;
}
.tabsTitle .tabs-nav a:hover{
background-color: #e5e5e5;
}
.tabsTitle .tabs-nav a.active{
border: 1px solid #336699;
border-bottom: 1px solid #FFF;
border-radius: 5px 5px 0 0;
background-color: #FFF;
}
</style>
<html>
<div class="container" id="recommendWork">
<div class="col-xs-12 countyTitle">
<div class="col-xs-12 tabsTitle">
<ul class="col-xs-12 tabs-nav">
<li><a href="#work01">全 省</a></li>
<li><a href="#work02">北北基</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 section-body">
<section class="tabs-panel" id="work01">
內容1
</section><!--work01-->
<section class="tabs-panel" id="work02">
內容2
</section><!--work02-->
</div>
</div>
</html>
留言列表
