javascript - 将“活动”类添加到与当前单击的侧边栏菜单链接相同的 href

Question

如何通过单击下拉菜单中的同一个 href 链接将活动类添加到选项卡并将其从所有其他选项卡中删除？

<div id="sidebar" class="sidebar py-3">
 <ul class="sidebar-menu list-unstyled">

   <li class="sidebar-list-item"><a href="/test" class="sidebar-link text- 
   muted active"><i class="la la-dashboard mr-3 text-gray "></i> 
   <span>Dashboard</span></a>
   </li>

    <li class="sidebar-list-item"><a href="/test2" class="sidebar-link text- 
   muted"><i class="la la-dashboard mr-3 text-gray "></i> 
   <span>Test</span></a>
   </li>
<ul>

</div>

<style>
.sidebar-link.active, .sidebar-link:focus {
    background: #e2e8ed;
    color:grey !important;
    text-decoration: none;
  }
</style>

标签： javascriptjqueryhtmlcssbootstrap-4

Answer 1

监听一个<a>元素的点击，然后移除所有类并为点击的元素添加一个类：

$("a").on("click", function() {
  $("a").removeClass("active");
  $(this).addClass("active");
});

.sidebar-link.active,
.sidebar-link:focus {
  background: #e2e8ed;
  color: grey !important;
  text-decoration: none;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div id="sidebar" class="sidebar py-3">
  <ul class="sidebar-menu list-unstyled">

    <li class="sidebar-list-item"><a href="#" class="sidebar-link text- 
   muted active"><i class="la la-dashboard mr-3 text-gray "></i> 
   <span>Dashboard</span></a>
    </li>

    <li class="sidebar-list-item"><a href="#" class="sidebar-link text- 
   muted"><i class="la la-dashboard mr-3 text-gray "></i> 
   <span>Test</span></a>
    </li>
  </ul>
</div>