我有一种感觉,之前曾有过这样的问题,但是我给了它一些搜索,找不到适合我情况的任何内容。
我正在尝试找出使用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循环是否能够正确处理此任务并监听所有选项卡上的点击,或者是否存在我应该研究的另一条路径?
非常感谢任何帮助。
答案 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();
});
请注意,要添加另一个标签页,您只需要添加到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();
});
答案 1 :(得分:0)
我认为你应该使用bootstrap tabs