Javascript “优化”；标签"；代码

我已经实现了一个“tab”控件，它可以在两个不同的选项卡之间切换，这是不言自明的。以下是相关代码：

HTML：

<div class="tabs margin-r">
  <div id="tab-1" class="tab">Tab 1</div>
  <div id="tab-2" class="tab">Tab 2</div>
</div>

var tabs = {

  init: function() {
    // Initialize cookie
    if(readCookie("tab_cookie")==null) {
      $("#tab-1").addClass("current-tab");
    } else {
      $("#" + readCookie("tab_cookie")).addClass("current-tab");
    }
    // Handle click event
    $(".tab").click(tabs.switchTabs);
  },

  switchTabs: function() {
    $(this).siblings(".tab").removeClass("current-tab");
    $(this).addClass("current-tab");
    createCookie("tab_cookie", $(this).attr("id"));
  }
};

$(document).ready(tabs.init);

---

我希望优化此代码，并支持多个选项卡位于同一页面上。显然，在这里使用

id

s会使多个选项卡变得困难，因此我希望更改该实现。任何想法，最佳实践等等？

你会有加载问题，因为如果你把HTML文件缩小成一个HTML文件，你就不得不考虑缩小HTML或其他。然而，大约两年前，我试图做你现在正在做的事情，结果变成了一团混乱。我得出的结论是，最好将选项卡中的每个页面作为php会话运行，这样，如果切换选项卡，另一个会话将从切换的选项卡关闭。但是对于您要指定的内容，您可以将选项卡列为变量，然后从那里开始，而不是使用

id

，您可以使用

数据

，例如：

$('.tabs').on('click', '.tab', tabs.switchTabs);

这样，您就可以使用jQuery访问它：

---

而不是将侦听器附加到每个选项卡。您可以通过将侦听器附加到父对象：

$('.tabs').on('click', '.tab', tabs.switchTabs);

如果您甚至想在创建DOM后使用ajax添加更多选项卡，这也会给您带来好处

---

如果页面中只设置了一个选项卡，则无需使用

同级（）

你可以这样写：

$(this).siblings(".tab").removeClass("current-tab");
$(this).addClass("current-tab");

就像这样：

$('.current-tab').removeClass('current-tab');
$(this).addClass("current-tab");

如果您仍然需要使用
sides（）
，您仍然可以使用
$（this）.sides（'current-tab'）
仅选择需要更改的选项卡，而不是全部选项卡。
我不太明白您的答案。。。我的问题更多的是关于如何只优化上面的代码，我并不担心会话或实际页面的切换

列出其他选项卡。如果我有两个单独的选项卡控件怎么办？我仍然不必使用同级控件吗？你是对的。你需要。我更新了答案：）好的，很酷。我接受了这个答案，因为它使用了大量我不太理解的东西并优化了我的代码。谢谢。我在代码中添加了第二个选项卡控件，我很高兴我现在正在工作，以确保它们各自都能正常工作。