让jQuery监听一组标签中的一个?

时间:2015-09-06 19:56:18

标签: jquery

我有一种感觉,之前曾有过这样的问题,但是我给了它一些搜索,找不到适合我情况的任何内容。

我正在尝试找出使用CSS / HTML / jQuery复制标签浏览的最佳方式。因此,例如,如果Safari中有3个打开的选项卡,并且tab1作为活动选项卡,则单击tab2或tab3将运行命令以隐藏先前活动的选项卡(tab1)并使单击选项卡(tab2)内容处于活动状态。

我正在努力弄清楚如何整合我提出的最简单的jQuery解决方案,它不能很好地扩展,绝对不是最好的方法。

这是我所拥有的代码的精简版,适用于两个标签,但绝对会超过2个标签。 .safaritabs类是实际标签栏的类,其中#tabcontent-1和#tabcontent-2是safari窗口内的内容的ID:

    void applyLinearImpulse(Vector2 impulse, Vector2 point, boolean wake)

和jQuery:

<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>

我知道必须有一种方法可以有效地自动执行此操作,这样我就不会为(.tab-1).click,(。tab-2).click,(。tab-3).click编写代码,等等,但我没有jQuery的专业知识来实现​​要研究的内容。各种类型的for循环是否能够正确处理此任务并监听所有选项卡上的点击,或者是否存在我应该研究的另一条路径?

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

为所有标签提供相同的类,并使用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>

然后在所有选项卡上注册click-event处理程序,但在回调中使用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

答案 1 :(得分:0)

我认为你应该使用bootstrap tabs