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

Posted 2023-02-24

【中文标题】将“活动”类添加到与当前单击的侧边栏菜单链接相同的 href

【英文标题】：Add 'active' class to same href as current clicked sidebar menu link

【发布时间】：2019-08-25 16:40:09

【问题描述】：

如何通过单击下拉菜单中的同一个 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>

【参考方案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>

【讨论】：

没问题@JesusSarmiento，总是乐于提供帮助。

我的朋友，如果我使用 laravel 并单击该项目会刷新，并且该项目未被选中（'未激活'）会发生什么

【参考方案2】：

您可以查看或参考此link

    $("ul> li").on("click", function() 
      $("ul> li").removeClass("active");
      $(this).addClass("active");
    );

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

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

   <li class="sidebar-list-item active"><a href="#" class="sidebar-link text- 
   muted "><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>

【参考方案3】：

你可以使用jQuery.toggle():

const $sidebarA = $('#sidebar a');
$sidebarA.on('click', () => $sidebarA.toggleClass('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>