Добавить «активный» класс к тому же 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>

Answer 1

Вы можете проверить это или отослать ссылку

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

Answer 2

Вы можете использовать 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>

Answer 3

Прослушайте щелчок по элементу <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>