Question

我已经实施了一个＆＃34;标签＆＃34;控制在两个不同的选项卡之间切换，非常自我解释。这是相关代码：

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>

JS ：

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会使多个标签变得困难，所以我希望改变这种实现方式。任何想法，最佳实践等？

Answer 1

而不是使用id，您可以使用data，例如：

<div data-tab="1" class="tab"></div>

这样你可以使用jQuery data()：

来访问它

$(this).data('tab'); // returns string: 1

// Get tab id and defaults to 1 if null
var tab_id = readCookie("tab_cookie") || 1;

// Set current tab
$('[data-tab=' + tab_id + ']', '.tabs').addClass('current');

而不是将侦听器附加到每个标签。您可以通过将监听器附加到父级来delegate events：

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

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

如果页面中只有一个标签集，则无需使用siblings()

你可以这样写：

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

像那样：

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

如果您仍然需要使用siblings()，您仍然可以使用$(this).siblings('current-tab')仅选择需要更改的标签，而不是所有标签。

Answer 2

那么你会遇到加载问题，因为如果你正在谈论将html文件缩小为一个html文件，你将不得不考虑缩小html或其他。然而，大约两年前，我试着做你现在正在做的事情，这变得一团糟。我得出的结论是，最好在选项卡中将每个单独的页面作为php会话运行，因此如果切换选项卡，其他会话将从您切换的选项卡关闭。但是对于您指定的内容，您可以将选项卡列为变量，并从那里开始

优化“标签”代码

2 个答案: