這是jQuery的正確使用嗎？

Question

我用html/css創建了一個標籤式顯示。我只是想使用jQuery來切換選項卡/類。它完美的工作，但我想確保我正確使用jQuery。

這裏的HTML結構+ jQuery的：

<ul id="tabs"> 
<li><a href="#" id="tab1" class="activetab">Tab1</a></li> 
<li><a href="#" id="tab2">Tab2</a></li> 
</ul> 

<div id="tabcontent"> 
<div id="tab1content"> 
This is tab 1 content 
</div> 
<div id="tab2content"> 
This is tab 2 content 
</div> 

$("#tab1").click(function() { 
      $("#tabcontent > div").hide(); 
      $("#tab1content").show(); 
      $("#tabs > li a").removeClass().addClass("inactivetab"); 
      $("#tab1").removeClass().addClass("activetab"); 
     }); 

jQuery的你看到TAB1重複爲每個標籤。

Answer 1

你應該在定義選項卡中的行爲用一個更通用的方法：

$('#tabs a').click(function(){ 
    $("#tabcontent > div").hide(); 
    $("#"+this.id+"content").show(); 
    $("#tabs > li a").removeClass().addClass("inactivetab"); 
    $(this).removeClass().addClass("activetab"); 
}); 

有了這個代碼，就可以添加其他標籤頁也不會需要添加新的JavaScript代碼。 a標籤的id屬性中的信息用於確定要顯示的內容面板。

Answer 2

您不需要重複每個選項卡的代碼。相反，編寫一個適用於所有選項卡的函數（使用jQuery選擇查找父節點和子節點），並將該單一函數綁定到製表符的點擊處理程序（您需要一個新類來標識哪些元素是製表符）。

Answer 3

jQuery看起來不錯，但是你可以推廣它以使用n個選項卡。

此外，爲非活動選項卡添加類可能是多餘的，就好像選項卡沒有活動類一樣，則可以將其視爲非活動類。

Answer 4

The jQuery you see for tab1 is repeated for each tab. 

我寧願去一般的解決方案。爲所有選項卡使用「選項卡」類，爲此寫一個點擊處理程序。使用$（this）引用被點擊的內容。

Answer 5

你在正確的軌道上我不會爲每個標籤點擊推薦編碼命令。 JQuery UI有一個標籤功能http://jqueryui.com/demos/tabs/，可以給你一些想法或使用。

Answer 6

您應該可以編寫一個函數，可以爲每個選項卡調用該函數。或者，你可以做這樣的事情：

$("#tab1, #tab2").click(function() { 
    var tab = $(this); 
    var tabContent = $('#' + tab.attr('id') + 'content'); 
    // etc. 
}); 

Answer 7

，或者你可以只使用tabs功能jQuery UI：

$("#tabs").tabs(); 

Answer 8

也可能是檢查出toggle效果非常有用。