如何更改活动类，而点击另一个链接在引导使用jQuery的？

问题描述

我有一个html作为边栏，并使用 Bootstrap 。

 < ul class =nav nav-list> 
< li class =active>< a href =/>连结1< / a>< / li> 
< li>< a href =/ link2>链接2< / a>< / li> 
< li>< a href =/ link3>链接3< / a>< / li> 
< / ul> 
  

我想要做一些事情：

当我点击链接（如链接3）时，页面内容将变为链接3的内容，链接3将有类活动，并移除链接1中的活动clss。

我认为这可以在 jQuery ，并且我在SO中搜索了很多问题，比如：

我使用以下脚本：

  $（document）.ready（function（）{
 $（'。nav li'）。click（function（e）{
 
 $（'。nav li'）。removeClass（'active'）; 
 
 var $ this = $（this）; 
 if（！$ this.hasClass（'active'））{
 $ this.addClass（'active'）; 
} 
 //e.preventDefault（）; 
}）; 
}）; 
  

但是其中大部分使用 preventDefault ，this将阻止继续行动。所以它不能改变链接3的页面内容。

如果我删除preventDefault语句，当页面加载链接3的内容时，活动类将返回链接1 。

那么有没有什么办法可以解决这个问题？

解决方案

你绑定了你点击错误的元素，你应该将它绑定到 a 。

在 li ，但是 li 没有默认行为， a

试试这个：

  $ （document）.ready（function（）{
 $（'。nav li a'）。click（function（e）{
 
 $（'。nav li.active'）。 removeClass（'active'）; 
 
 var $ parent = $（this）.parent（）; 
 $ parent.addClass（'active'）; 
 e.preventDefault ）; 
}）; 
}）; 
  

I have a html as sidebar, and use Bootstrap.

<ul class="nav nav-list">
    <li class="active"><a href="/">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
    <li><a href="/link3">Link 3</a></li>
</ul>

I want to do some thing:

When I click a link such as Link 3, the page content will change to Link 3's content, and the Link 3 will have class active, and remove the active clss in Link 1.

I think this can be implemented in jQuery, and I have searched many question in SO, such as:

• How to keep an active link in nav list (twitter bootstrap)?
• Bootstrap CSS Active Navigation

I use this script:

$(document).ready(function () {
    $('.nav li').click(function(e) {

        $('.nav li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

But most of them use preventDefault, this will prevent the continued action. So it can't change to Link 3's page content.

If I remove the preventDefault statement, when the page load Link 3's content, the active class will back to Link 1.

So Is there any way to solve this problem?

解决方案

You are binding you click on the wrong element, you should bind it to the a.

You are prevent default event to occur on the li, but li have no default behavior, a does.

Try this:

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

这篇关于如何更改活动类，而点击另一个链接在引导使用jQuery的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！