这是jQuery的正确用法吗？

我用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");
       });

这是表1的内容
这是表2的内容
$（“#表1”）。单击（函数（）{
$（“#tabcontent>div”）.hide（）；
$（“#tab1content”）.show（）；
$（“#tabs>li a”）.removeClass（）.addClass（“不活动选项卡”）；
$（“#tab1”）.removeClass（）.addClass（“activetab”）；
});

---

您为tab1看到的jQuery对每个选项卡都是重复的。

您不需要为每个选项卡重复代码。相反，编写一个应用于所有选项卡的函数（使用jQuery选择查找父节点和子节点），并将该函数绑定到选项卡的单击处理程序（您需要一个新类来标识哪些元素是选项卡）。

无需为每个选项卡重复代码。相反，编写一个应用于所有选项卡的函数（使用jQuery选择查找父节点和子节点），并将该函数绑定到选项卡的单击处理程序（您需要一个新类来标识哪些元素是选项卡）。

jQuery看起来不错，但您可以将其推广到使用n个选项卡

---

此外，为非活动选项卡添加类可能是多余的，因为如果选项卡没有活动类，则可以将其视为非活动的。

jQuery看起来不错，但您可以将其推广到使用n个选项卡

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

此外，为非活动选项卡添加类可能是多余的，因为如果选项卡没有活动类，则可以将其视为非活动

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

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

---

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

您的思路正确，我不建议为每次单击选项卡编写命令。jQueryUI有一个选项卡功能，它可以给你一些想法，也可以让你使用。

你说得对，我不建议为每次单击选项卡编写命令。jQueryUI有一个选项卡功能，它可以给你一些想法，也可以供你使用。

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

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

---

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

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

---

在定义选项卡的行为时，应使用更通用的方法：

$('#tabs a').click(function(){
    $("#tabcontent > div").hide();
    $("#"+this.id+"content").show();
    $("#tabs > li a").removeClass().addClass("inactivetab");
    $(this).removeClass().addClass("activetab");
});

---

使用此代码，可以添加其他选项卡，而无需添加新的JavaScript代码。标记的id属性中的信息用于确定要显示的内容面板。

在定义选项卡的行为时，应使用更通用的方法：

$('#tabs a').click(function(){
    $("#tabcontent > div").hide();
    $("#"+this.id+"content").show();
    $("#tabs > li a").removeClass().addClass("inactivetab");
    $(this).removeClass().addClass("activetab");
});

使用此代码，可以添加其他选项卡，而无需添加新的JavaScript代码。标签id属性中的信息用于确定要显示的内容面板。

或者您可以使用以下功能：

或者，您也可以使用以下功能：

---

也可能有助于查看效果。

也可能有助于查看效果。

并使用href=“#yourTab”（这比链接到页面顶部更有意义）和href=“#yourTab”（这比链接到页面顶部更有意义）