[Blogger] 利用 jQuery 來製作 Tab 選單 (參考自男丁格爾)

參考自男丁格爾大大的文章：http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html

男丁格爾大大的教學寫得十分詳盡，也可以至男丁格爾大大的文章去看看囉。

我是把這個東西放在一個在 Blog 文章底下另外加上的 section，必須進入文章 (Pagetype = item) 才會顯示 (利用 <b:if> )，然後讓裡頭的 widget 利用 jQuery，使得整個版面不會一直拉長，並且提供 TAB 頁籤來做切換。

底下簡單說明一下我的作法

首先是 CSS，略作修改，其中，div#main2 即是用來賦予 <b:section id=’main2’> 樣式的。

<style type='text/css'>
ul.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 22px;
    border-bottom: solid 1px #999;
    border-left: solid 1px #999;
}
ul.tabs li {
    float: left;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    position: relative;
    margin-bottom: -1px;    /* 讓 li 往下移來遮住 ul 的部份 border-bottom */
    border: solid 1px #999;
    border-left: none;
    background: #e1e1e1;
}
ul.tabs li a {
    display: block;
    padding: 0 20px;
    color: #000;
    border: solid 1px #fff;
    text-decoration: none;
}
ul.tabs li a:hover {
    background: #FEFEFE;
}
ul.tabs li.active  {
    background: #fff;
    border-bottom: solid 1px #fff;
    border-top: solid 3px red;
    height: 19px;
}
ul.tabs li.active a:hover {
    background: #fff;
}
div#main2 {
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        border-left: 1px solid #999;
        padding: 1em 1em 0 1em;
}
</style>

再來就是選單區，其中 href=’#HTML6’ 就是要指到底下的 <b:widget id=’HTML6’>，以此類推。

<ul class='tabs'>
    <li><a href='#HTML6'>相關文章</a></li>
    <li><a href='#HTML5'>熱門點閱</a></li>
    <li><a href='#HTML11'>Pushba! 推推</a></li>
    <li><a href='#HTML7'>推薦閱讀</a></li>
    <li><a href='#HTML31'>噗噗浪</a></li>
    <li><a href='#HTML32'>臉書聊聊</a></li>
</ul>

底下這塊很熟悉吧，這個就是像你的側邊欄會一塊一塊的東西，所以你也可以試著在原來的側邊欄下方另外再切一個側邊欄，然後把這個新的側邊欄改成 TAB 頁籤顯示的方式，點選頁籤之後切換 widget 就不會讓側邊欄一直變長啦。

<b:section class='main' id='main2' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML11' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
<b:widget id='HTML31' locked='false' title='' type='HTML'/>
<b:widget id='HTML32' locked='false' title=’' type='HTML'/>
</b:section>

最後，再把 jQuery 程式加上去就搞定了，針對 id 為 main2 的 section，底下的 .widget 做 hide 的動作。(ps. 文字說明都是男丁大大寫的，很容易懂)

<script language='JavaScript' type='text/javascript'>
$(function() {
     // 預設顯示第一個 Tab
    var_showTab = 0; 

     $('ul.tabs li').eq(_showTab).addClass('active'); 
     $('#main2 > .widget').hide().eq(_showTab).show();

     // 當 li 頁籤被點擊時...
     // 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover 
     $('ul.tabs li').click(function() {
          // 找出 li 中的超連結 href(#id)
          var $this = $(this), _clickTab = $this.find('a').attr('href');

          // 把目前點擊到的 li 頁籤加上 .active
          // 並把兄弟元素中有 .active 的都移除 class
          $this.addClass('active').siblings('.active').removeClass('active'); 

          // 淡入相對應的內容並隱藏兄弟元素
          $(_clickTab).stop(false, true).fadeIn().siblings().hide();

          return false;
      }).find('a').focus(function(){
          this.blur();
      });
});
</script>

裝好的成果如每篇文章頁面底下所示。