如何在单击引导程序中的另一个链接时更改活动类使用jquery？

Question

我有一个html作为侧边栏,并使用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>

我打算做点什么:

当我click链接3之类的链接时,page content将更改为链接3的内容,链接3将具有类active,并删除链接1中的活动clss.

我认为这可以实现jQuery,我在SO中搜索了很多问题,例如:

• 如何在导航列表(twitter bootstrap)中保持活动链接？
• Bootstrap CSS主动导航

我用这个脚本:

$(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,这将阻止继续行动.因此它无法更改为Link 3的页面内容.

如果我删除了preventDefault语句,当页面加载Link 3的内容时,活动类将返回到Link 1.

那么有什么方法可以解决这个问题吗？

Answer 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();
    });
});

Answer 2

伙计们试试这是这个问题的完美答案：

<script>
    $(function(){
        $('.nav li a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
        $('.nav li a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
        })
    })
    </script>

Answer 3

我正在使用bootstrap导航

这对我来说很有帮助,包括活跃的主要下拉和活跃的孩子

$(document).ready(function () {
        var url = window.location;
    // Will only work if string in href matches with location
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });