如何通过jquery激活链接

How to active link by jquery?

本文关键字：链接 激活 jquery 何通过      更新时间：2023-09-26

这是我的导航代码，我正试图通过jquery激活它，但我需要一个小的解决方案。

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
             <ul class="nav navbar-nav side-nav">
               <li class="active" id="dashboard">
                 <a href="admin/users/dashboard">Dashboard</a>                    
               </li>
               <li id="clients">
                 <a href="admin/users/clients">Clients</a>                    
               </li>
            </ul>
 </nav>

我可以使用onclick事件激活链接。每页如果我正确

$('#deshboard').click(function(){
   $(this).addClass('active');
})

它正在工作，但需要编写大量代码。有什么简单的解决方案吗？

只需执行以下操作：

只需为所有链接使用一个类，例如"common_class"，然后执行以下操作，

HTML

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
             <ul class="nav navbar-nav side-nav">
               <li class="active common_class">
                 <a href="admin/users/dashboard">Dashboard</a>                    
               </li>
               <li class="common_class">
                 <a href="admin/users/clients">Clients</a>                    
               </li>
            </ul>
 </nav>

Jquery

$('.common_class').click(function(){
   $('.common_class').removeClass('active');   // it remove all the active links
   $(this).addClass('active');    // it adds active class to the current link you have opened
})

这将节省您的大量代码，而且易于理解。

注意：在头文件中添加此jquery，所有页面的头文件必须相同

进行

在UL标签中使用公共类

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                     <ul class="nav navbar-nav side-nav  common_class ">
                       <li class="active" id="dashboard">
                         <a href="admin/users/dashboard">Dashboard</a>                    
                       </li>
                       <li id="clients">
                         <a href="admin/users/clients">Clients</a>                    
                       </li>
                    </ul>
         </nav>

JS将是：

$('.common_class li').click(function(){
   $('.common_class li').removeClass('active');
   $(this).addClass('active');
})
相关文章：