JQuery的Tab鍵問題

我有一些HTML和JQuery用來創建選項卡式內容的頁面。在HTML低於：JQuery的Tab鍵問題

<section id="content" class="content"> 
    <ul class="tabs group"> 
     <li><a href="#">Tab 1</a></li> 
     <li><a href="#">Tab 2</a></li> 
     <li><a href="#">Tab 3</a></li> 
    </ul> 
    <div class="panes"> 
     <div class="group"> 
       tab1 
     </div>   
     <div class="group"> 
       tab2 
     </div>   
     <div class="group"> 
       tab3 
     </div> 
    </div> 
</section>

jQuery的是在這裏：

<script type="text/javascript"> 
     $(document).ready(function() {   
      $('.activetab a').each(function() { 
       var activeTab = $(this).parents('li').index(); 
       var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab); 
       paneVisible.show().siblings().hide(); 
      }); 

      $('.tabs a').click(function() {   
       $(this).parents('li').addClass('activetab').siblings().removeClass('activetab'); var activeTab = $(this).parent('li').index(); 
       var paneVisible = $(this).parents('ul').next().children('div').eq(activeTab); 
       paneVisible.show().siblings().hide(); 
       return false; 
      }); 
     }); 
    </script>

這個代碼在，當我點擊出現在正確的選項卡中的數據的鏈接之一感。

唯一的問題是，當我去的網頁（含這些選項卡）的第一次，我從顯示給我的所有標籤中獲取數據。我在文檔就緒功能中需要一些額外的代碼來顯示第一個選項卡中的數據並隱藏所有其他數據（當然也要突出顯示第一個選項卡）。任何想法，我可以做到這一點。我不是JQuery/JavaScript專家。

感謝，

薩欽

來源

2012-05-15 Sachin Kainth

就在activetab類添加到<li>要素之一ul.tabs裏面，像這樣：

<li class="activetab"><a href="#">Tab 1</a></li>

這裏你可以看到它在行動：http://jsfiddle.net/CAAFZ/

來源

2012-05-15 13:45:10 wrock

感謝，該訣竅 –

好了，如果沒有任何具體的原因，你可以使用jQuery UI的標籤，實現這一功能。

瞧瞧吧： http://jqueryui.com/demos/tabs/

其他方式做到這一點，在CSS中添加：

.tabs {display:none;}

而在你的document.ready函數中添加

$('.tabs').show();

這樣，直到樣式良好時，醜陋的顯示對最終用戶不可見。

錯過Wrock的答覆。這應工作太:)

來源

2012-05-15 14:00:41

JQuery的Tab鍵問題

回答

相關問題