Question

我有以下侧栏菜单代码。单击任何导航项后，它会突出显示/使该类处于活动状态。

$(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个ID。所以寻找一种更聪明的方法来实现这一目标。

编辑：我当前的代码只会激活该类：$(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");
  });
});

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

a）SO还没有支持SCSS，
b）我懒惰。

另请注意，我为您的CSS和标记做了一些小修改。另请注意：HTML中的重复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，在第二组元素上使用类而不是id。这也可以通过许多其他方式实现：

$(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>

Answer 4

重写html代码如下

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

<ul class="nav">
  <li class="nav-item system">
    <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 host">
    <a class="nav-link" href="#hosts" id="hosts" data-parent="#hosts">Hosts</a>
  </li>
  <li class="nav-item card">
    <a class="nav-link" href="#card-range" id="card-range">Cards</a>
  </li>
  <li class="nav-item printer">
    <a class="nav-link" id="pinpads" href="#pinpads">Printer</a>
  </li>
  <li class="nav-item pinpad">
    <a class="nav-link" id="xmls" href="#xmls">Pinpad</a>
  </li>
</ul>

确保为匹配的li添加相同的类名。然后按如下方式修改js代码，

$(document).ready(function() {
  $(".nav li").click(function() {
 //Make sure to add class name immediately after "nav-item". For eg."nav-item printer"
  var calss=$(this).attr('class').split(' ')[1];
  console.log(calss);
  $(".nav li").removeClass("active");
  $(".connected-line ul li").removeClass("active");
  $("li." + calss).addClass("active");
  });

});

在导航栏上单击

4 个答案: