如何使用jquery在引导程序中激活导航栏

我想点击它时让导航栏处于活动状态，

这是我使用的jquery

$(document).ready(function () { $('.navbar li').click(function(e) { $('.navbar li').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); }); }); 

但因为preventDefault我不能去我想要的链接。 它只是使导航栏处于活动状态，但它不会转到我选择的链接。

这是链接代码：

 
 
 
<a href='https://stackoverflow.com/questions/17717025/how-to-active-nav-bar-in-bootstrap-with-jquery/'>Knowledge Base 
 
<a href='https://stackoverflow.com/questions/17717025/how-to-active-nav-bar-in-bootstrap-with-jquery/'>Ticketing 
 
<a href='https://stackoverflow.com/questions/17717025/how-to-active-nav-bar-in-bootstrap-with-jquery/'>Logout 
 
  

如果我不使用preventDefault()导航栏将不会激活，但如果我使用它我不能去我想要的链接..

Answer 1

将jQuery脚本更改为：

Answer 2

形成你的问题，我得到的是你想要将active类设置为li然后重定向到其他页面。 如果我理解得对，那么，

看起来你正以错误的方式接近它。 您正尝试先将active类设置为li ，然后重定向到其他页面。 这无论如何都不会起作用，因为重定向active类不会自动维护。

因此，正确的方法是仅将active类逻辑放在目标页面上，即首先导航到目标页面，然后可以将active类设置为li 。

Answer 3

您可以使用以下javascript根据当前url添加活动类

我假设您正在使用codeigniter，因此uri_string（）函数可用

 $(document).ready(function () { var active_link = $('.navbar li a[href~=""]'); if(active_link.size() > 0) active_link.parent().parent().addClass('active'); });