这是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");
       });

您为tab1看到的jQuery将针对每个选项卡重复.

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选择查找父节点和子节点)并将该单个函数绑定到选项卡的单击处理程序(您需要一个新类来标识哪些元素是选项卡).