Question

这是我的导航代码，我试图通过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');
})

它正在运行，但需要编写大量代码。有没有简单的解决方案？

Answer 1

只需执行以下操作：

只需对所有链接使用单个类，例如＆＃34; common_class＆＃34;然后执行以下操作，

<强> 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，对于所有页面必须相同。

一起去吧

Answer 2

在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');
})

如何通过jquery激活链接？

2 个答案: