在导航栏单击时，将类设置为其他li元素上的活动

Question

我有下面的条形码。单击任何nav项时，它会突出显示/使类处于活动状态。

$(document).ready(function() {
  $(".nav li").click(function() {
    if ($(".nav li").removeClass("active")) {
      $(this).removeClass("active");
    }
    $(this).addClass("active");
  });

});


<ul class="nav">
  <li class="nav-item">
    <a data-target="#system-settings" data-toggle="pill" class="nav-link" href="#system-settings" id="system-settings">System Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#hosts" id="hosts" data-parent="#hosts">Hosts</a>
  </li>
  <li class="nav-item ">
    <a class="nav-link" href="#card-range" id="card-range">Cards</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pinpads" href="#pinpads">Printer</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="xmls" href="#xmls">Pinpad</a>
  </li>

</ul>

现在，我在页面的顶部有类似的条目，表示为一个连接的圆圈：

<div class="connected-line">
  <ul>
    <li class="active">1
      <p> System </p>
    </li>
    <li id="hosts">2
      <p> Hosts </p>
    </li>
    <li>3
      <p> Cards </p>
    </li>
    <li>4
      <p> Devices </p>
    </li>
  </ul>
</div>

参见jsfiddle：https://jsfiddle.net/vk3qw09f/345/

现在，如果用户单击侧栏菜单，它还应该将相应的类设置为“连接行”列表元素上的活动类。

例如:在导航栏上的“系统设置”还应该在圈出的li“系统”中的li项中添加一个‘活动’类。

我知道在同一个页面上使用相同的2个ids是不可取的。因此，寻找一种更明智的方法来实现这一点。

编辑:我当前的代码只会使该类活动：$(this).addClass("active");

我可能想让所有同名的类都激活。

Answer 1

我想这就是你要找的。

$(document).ready(function() {
  $(".nav li a").click(function(e) {
    e.preventDefault();
    $(".nav li").removeClass("active");
    $(".connected-line li").removeClass("active");
    $($(this).attr('href')).addClass('active');
    $(this).addClass("active");
  });
});

完整的工作片段这里。在回答中没有添加代码片段，因为：

( a)所以还不支持SCSS，

b)我很懒。

还请注意，我为您的CSS和标记做了一些小的mods。另一个注意:复制的id在中是非法的。你拿到了吗？预期您的JavaScript会中断。事情就是这么简单。

Answer 2

替换代码中的代码。我希望你能做到。如果有什么问题告诉我。

$(document).ready(function() {
  $(".nav li a").click(function() {

      $(".connected-line ul li").removeClass("active");
       id = $(this).prop('id');
     $("#" + id).addClass("active")



  });

});




<div class="connected-line">
  <ul>
    <li class="active"  id="system-settings">1
      <p> System </p>
    </li>
    <li id="hosts">2
      <p> Hosts </p>
    </li>
    <li  id="card-range">3
      <p> Cards </p>
    </li>
    <li id="pinpads">4
      <p> Devices </p>
    </li>
    <li id="xmls" >5
      <p> Lanes </p>
    </li>
  </ul>
</div>

<ul class="nav">
  <li class="nav-item">
    <a data-target="#system-settings" data-toggle="pill" class="nav-link" href="#system-settings" id="system-settings">System Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#hosts" id="hosts" data-parent="#hosts">Hosts</a>
  </li>
  <li class="nav-item ">
    <a class="nav-link" href="#card-range" id="card-range">Cards</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pinpads" href="#pinpads">Printer</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="xmls" href="#xmls">Pinpad</a>
  </li>

</ul>

Answer 3

最好不要有两个具有相同elements属性的id。这是因为本机函数(如getElementById )将永远无法使用该id选择元素的第二个实例。

为了让您的演示正常工作，我将js更改为使用类而不是第二组元素的ids。这也可以通过许多其他方式实现：

$(document).ready(function() {
  $(".nav li").click(function() {
    $('li').removeClass("active");
    $(this).removeClass("active");
    $(this).addClass("active");
    const clickedId = $(this).children()[0].id;
    $(`.${clickedId}`).addClass('active');
  });
});

然后在html中

<div class="connected-line">
  <ul>
    <li class="system-settings">1
      <p> System </p>
    </li>
    <li class="hosts">2
      <p> Hosts </p>
    </li>
    <li class="card-range">3
      <p> Cards </p>
    </li>
    <li class="pinpads">4
      <p> Devices </p>
    </li>
    <li class="xmls">5
      <p> Lanes </p>
    </li>
  </ul>
</div>

<ul class="nav">
  <li class="nav-item">
    <a data-target="#system-settings" data-toggle="pill" class="nav-link" href="#system-settings" id="system-settings">System Settings</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#hosts" id="hosts" data-parent="#hosts">Hosts</a>
  </li>
  <li class="nav-item ">
    <a class="nav-link" href="#card-range" id="card-range">Cards</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pinpads" href="#pinpads">Printer</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="xmls" href="#xmls">Pinpad</a>
  </li>
</ul>