Bootstrap twitter活动导航栏 - 使用JQuery更改类名

Question

我使用bootstrap twitter,我希望菜单中的不同网站在点击时显示为活动状态.我发现了Bootstrap Twitter CSS Active Navigation这个问题来处理这个问题.

我的问题是我无法在其中一个答案中使用JQuery函数.修改应该非常直接,以使其在我的情况下工作,在HTML中是:

<script>
$('body').on('.nav li a', 'click', function()
{
    var $thisLi = $(this).parents('li:first');
    var $ul = $thisLi.parents('ul:first');
    if (!$thisLi.hasClass('active'))
    {
        $ul.find('li.active').removeClass('active');
        $thisLi.addClass('active');
    }
});
</script>

<ul class="nav nav-pills pull-left">
    <li class="active"> <a href="home.html">Home</a> </li>
    <li> <a href="about.html">About</a> </li>
</ul>

关于可能出现什么问题的任何线索？先感谢您.

Answer 1

要在第一个答案的评论中回答你的问题,.parents('li')会在你从当前位置走向DOM时找到任何李父母.添加:first伪选择器可确保您找到第一个伪选择器.

更好的解决方案是使用.parent(单数.)如:$thisLi.parent('ul').我不相信这是你的问题,虽然......

浏览器是否可能只是在您上面加载新页面？我没有看到你打电话event.preventDefault(),事实上你没有在你的代码中捕获事件,你只是回应它...

此外,.on是现在绑定到事件的首选方法:

$(function(){

    $('.nav li a').on('click', function(e){

        e.preventDefault(); // prevent link click if necessary?

        var $thisLi = $(this).parent('li');
        var $ul = $thisLi.parent('ul');

        if (!$thisLi.hasClass('active'))
        {
            $ul.find('li.active').removeClass('active');
                $thisLi.addClass('active');
        }

    })

})