讓jQuery聽取一組標籤中的一個點擊嗎？

Question

我有這樣的感覺之前已經被問到過，但我給了它幾個搜索，並找不到適合我的情況的任何東西。

我想弄清楚用CSS/HTML/jQuery複製標籤頁瀏覽的最佳方法。因此，例如，如果Safari中的3個打開的選項卡以tab1作爲活動選項卡，則單擊選項卡2或選項卡3將運行一個命令以隱藏先前活動的選項卡（選項卡1）並使選定的選項卡的選項卡（選項卡2）內容處於活動狀態。

我正在努力弄清楚如何整合我提出的最直接的jQuery解決方案，它不能很好地擴展，絕對不是最好的方式來做到這一點。

這裏有一個精簡版的代碼，我可以在兩個選項卡上正常工作，但對於超過2個選項卡肯定會很痛苦。所述.safaritabs類是實際的標籤欄，其中＃tabcontent-1和＃tabcontent-2是用於Safari窗口內的內容的ID的類：

<div class="safaritabs"> 
    <div class="tab-1 activetab"> 
    Tab 1 
    </div> 
    <div class="tab-2"> 
    Tab 2 
    </div> 
    <div class="tab-3"> 
    Tab 3 
    </div> 
</div> 

<div class="tabcontent" id="tabcontent-1"> 
    <!--Tab content--> 
</div> 
<div class="tabcontent" id="tabcontent-2"> 
    <!--Tab content--> 
</div> 

而jQuery的：

$(".tab-2").click(function(){ 
    $("#tabcontent-1").hide(); 
    $(".tab-1").removeClass("activetab"); 
    $(".tab-2").addClass("activetab"); 
    $("#tabcontent-2").show(); 
}); 

我知道必須有一種有效的自動化方法，以便我不編寫代碼（.tab-1）.click，（.tab-2）.click，（.tab-3）.click等。但我並不完全瞭解jQuery的技術知識，以便了解要研究的內容。一個for循環能夠正確地處理這個任務並且聽取所有選項卡上的點擊，還是有另外一條我應該看看的路線？

任何幫助，非常感謝。

Answer 1

給所有選項相同的類，並使用data-*屬性內容的div標籤關聯：

<div class="safaritabs"> 
    <div class="tab activetab" data-content="#tabcontent-1"> 
    Tab 1 
    </div> 
    <div class="tab" data-content="#tabcontent-2"> 
    Tab 2 
    </div> 
    <div class="tab" data-content="#tabcontent-3"> 
    Tab 3 
    </div> 
</div> 

然後註冊在所有標籤的點擊事件處理程序，但使用this內回調來引用被點擊的標籤。

$('.tab').click(function(){ 
    var $tab = $(this); 
    $('.tab').removeClass('activetab'); 
    $tab.addClass('activetab'); 
    $('.tabcontent').hide(); 
    $($tab.attr('data-content')).show(); 
}); 

jsfiddle

注意添加另一個選項卡中，你只需要添加到HTML ---你不必更改JavaScript代碼。

---

您還可以使用event delegation註冊點擊事件處理程序。在這種情況下，事件處理程序實際上放置在圍繞製表符的div上，但仍然只在單擊製表符時調用，並且this仍然指向單擊的選項卡。由於只註冊了一個事件處理程序，而不是每個選項卡都有一個，因此效率稍高一點。

$('.safaritabs').on('click', '.tab', function(){ 
    var $tab = $(this); 
    $('.tab').removeClass('activetab'); 
    $tab.addClass('activetab'); 
    $('.tabcontent').hide(); 
    $($tab.attr('data-content')).show(); 
}); 

jsfiddle

Answer 2

我認爲你應該使用bootstrap tabs