font

2月 01, 2015

用簡單JS外掛切換tab


用簡單JS外掛切換tab,首先,

1.
下載:jquery.tab.js的外掛。


2.
加入以下這一段:

<script type="text/javascript" src="/../js/jquery.tab.js"></script>(←路徑記得改啊!)
<script type="text/javascript">


//tab切換JS
 $(function(){
// 預設顯示第一個 Tab
var _showTab = 0;
$('.page_tab').each(function(){
// 目前的頁籤區塊
var $tab = $(this);

var $defaultLi = $('ul.tabs li', $tab).eq(_showTab).addClass('active');
$($defaultLi.find('a').attr('href')).siblings().hide();

// 當 li 頁籤被點擊時...
// 若要改成滑鼠移到 li 頁籤就切換時, 把 click 改成 mouseover
$('ul.tabs li', $tab).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>



3.
接著,你的div架構應該要是這樣,標註的橘黃色屬性都是務必對應正確的地方:

<div class="page_tab">   // 這page_tab正是對應前面的JS的,可改。但注意一定要包住選單跟內文
  <div class="menu">
    <ul class="tabs">   // 選單的ul需加上tabs,以便前面JS抓取這段:ul.tabs li
      <li class="active"><a href="#tab1">選單一</a></li>   // 首要顯示的li請加上active,並標註好ID
      <li><a href="#tab2">選單二</a></li> 
       <li><a href="#tab2">選單三</a></li>
     </ul>
   </div>
   <div class="page">
     <div id="tab1">
      內文一
     </div>
    <div id="tab2">
      內文一
    </div>
     <div id="tab3">
      內文一
    </div>
  </div>
</div>


※另外記得<li>要包住<a>,用<a>包住<li>是會沒有效果的喔。 就是那麼簡單。









Related Posts Plugin for WordPress, Blogger...

ShareThis