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

监听一下{ "ProviderId": "Microsoft.VisualStudio.ConnectedService.Wcf", "Version": "15.0.20628.921", "GettingStartedDocument": { "Uri": "https://go.microsoft.com/fwlink/?linkid=858517" }, "ExtendedData": { "Uri": "http://xxxxx/eisp-zk/ws/zkiService?wsdl", "Namespace": "EispService", "SelectedAccessLevelForGeneratedClass": "Public", "GenerateMessageContract": false, "ReuseTypesinReferencedAssemblies": true, "ReuseTypesinAllReferencedAssemblies": true, "CollectionTypeReference": { "Item1": "System.Array", "Item2": "System.Runtime.dll" }, "DictionaryCollectionTypeReference": { "Item1": "System.Collections.Generic.Dictionary`2", "Item2": "System.Collections.dll" }, "CheckedReferencedAssemblies": [], "InstanceId": null, "Name": "EispService", "Metadata": {} } }元素，然后删除所有类并将类添加到单击的元素中：

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

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

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

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

3 个答案: