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

Answer 3

The jQuery you see for tab1 is repeated for each tab.

我宁愿选择通用解决方案。对所有选项卡使用“tab”类，为其编写单击处理程序。使用$（this）来引用点击的内容。

Answer 4

您应该能够编写单个函数，可以为每个选项卡调用该函数。或者，您可以这样做：

$("#tab1, #tab2").click(function() {
  var tab = $(this);
  var tabContent = $('#' + tab.attr('id') + 'content');
  // etc.
});

Answer 5

jQuery看起来没问题，但您可以将其概括为使用n个选项卡。

另外，为非活动标签添加一个类可能是多余的，就好像一个标签没有活动类，那么它可以被认为是不活动的。

Answer 6

或者您可以使用tabs中的jQuery UI功能：

$("#tabs").tabs();

Answer 7

你在正确的轨道上我不建议为每个标签点击编码命令。 JQuery UI有一个标签功能http://jqueryui.com/demos/tabs/，可以为您提供一些想法或供使用。

Answer 8

也可能有助于查看toggle效果。

这是jQuery的正确使用吗？

8 个答案: