让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