Question

所以我正在制作一个使用自定义标签的网站，我很好奇为什么这些行不相等。

相关的html：

<div class="bot_section clear">
      <div class="tab-panels">
        <ul class="tabs">
          <li rel="panel1" class="active">Routebeschrijving</li>
          <li rel="panel2">Contact</li>
        </ul>

这是工作代码：

$(".tab-panels .tabs li").on('click', function() {
    $(".tab-panels .tabs li.active").removeClass('active');

这是重写的代码，它指的是相同的（但似乎并不完全如此）：

    $activeTab = $(".tabs").find("li.active");

    $tab.on('click', function() {
        $activeTab.removeClass('active');
        $(this).addClass('active');

在第一个（不干净的）代码中，它删除了两个活动类，但是更干净的代码只删除了面板上的活动类（panel2始终保持活动状态）。

我做错了什么？

Answer 1

$activeTab = $(".tabs").find("li.active");

仅在您的网页上搜索过一次，因此只有在您第一次点击时才会有效。这是因为每次点击都不会搜索active li。（它不在点击事件的正文中，就像你提供的其他示例代码一样）

所以第一个代码是：

搜索活动的li并保存
点击 - ＆gt;从已保存的元素中删除活动类
点击 - ＆gt;从已保存的元素（不再具有活动类）中删除活动类

第二个代码是

点击 - ＆gt;使用活动类搜索元素从此元素中删除活动类
点击 - ＆gt;使用活动类搜索元素从此（可能是新的）元素中删除活动类

Answer 2

在第一个代码段中，您评估$("[...] li.active")处理程序中的click，这意味着每次点击li时都会查询当前有效的li。

在第二个脚本中，您只评估$("[...] li.active") ，并将结果存储在$activeTab中。点击panel2后，$activeTab仍会保留panel1，但不再有active类。

第二个脚本的修复是在更改类时更新 $activeTab变量：

$activeTab = $(".tabs").find("li.active"); // <- Initial value
$tab.on('click', function() {
    $activeTab.removeClass('active');
    $(this).addClass('active');
    $activeTab = $(this); // <- Update value
});

（如果您感觉冒险，可以将这两行合并到$activeTab = $(this).addClass('active')。但是，如果您在addClass之后链接更多内容，那可能会中断...）

为什么这些线不一样？

2 个答案: