Javascript 单击导航栏时，在其他li元素上将“类”设置为“活动”_Javascript_Jquery_Html_Css_Twitter Bootstrap

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

javascript jquery html css twitter-bootstrap

Javascript 单击导航栏时，在其他li元素上将“类”设置为“活动”,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我有下面的侧栏菜单代码。单击任何导航项目后，它会高亮显示/激活该类 $(document).ready(function() { $(".nav li").click(function() { if ($(".nav li").removeClass("active")) { $(this).removeClass("active"); } $(this).addClass("active"); }); }); <ul class="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>

$（文档）.ready（函数（）{
$（“.nav li”）。单击（函数（）{
如果（$（“.nav li”）.removeClass（“活动”））{
$（此）.removeClass（“活动”）；
}
$（此）.addClass（“活动”）；
});
});

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

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



1
系统

2
主人

三,
纸牌

四,
装置

参见JSFIDLE：

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

例如：在导航栏上点击“系统设置”也应在圆圈li“系统”内的li项目中添加一个“活动”类

我知道不建议在同一页上有相同的2个ID。因此，寻找一种更聪明的方法来实现这一点

编辑：我的当前代码只会激活该类：

$（this.addClass（“active”）
我可能想让所有共享相同名称的类都处于活动状态
替换代码中的代码。我希望你能做到。如果有任何问题，请告诉我
$(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>

$（文档）.ready（函数（）{
$（“.nav li a”）。单击（函数（）{
$（“.connected line ul li”）.removeClass（“活动”）；
id=$（this.prop（'id'）；
$（“#”+id）.addClass（“活动”）
});
});

1
系统

2
主人

3
纸牌

4
装置

5
车道














最好不要让两个元素具有相同的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>



1
系统

2
主人

3
纸牌

4
装置

5
车道














将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>

我想这就是你要找的
$（文档）.ready（函数（）{
$（“.nav li a”）。单击（函数（e）{
e、 预防默认值（）；
$（“.nav li”）.removeClass（“活动”）；
$（“.connected line li”）.removeClass（“活动”）；
$（$（this.attr（'href'））.addClass（'active'）；
$（此）.addClass（“活动”）；
});
});

完整的工作片段。未在应答中添加代码段，因为：
a） 所以还不支持SCS，

b） 我很懒
还要注意，我对CSS和标记做了一些小修改。另一个注意事项：重复的id
s在HTML中是非法的。你有吗？期望您的JavaScript崩溃。就这么简单。
而且你的第一个if（）
应该是hasClass
，而不是removeClass我当前的代码只会激活该类：$（this）.addClass（“active”）；我可能希望使所有类共享相同的名称active@billy护城河如何将类添加到类中。基本上，当我点击侧边栏菜单时，相应的圆圈列表元素需要有活动的class@Micheal检查我的答案..a密码..在您的代码中有两个带有“id=”系统设置“的id。这不违反css规则吗？@Micheal从这里开始检查：
$(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");
  });

});