jquery - Bootstrap twitter Active Navigation Bar - 使用 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 时找到任何 li parent 。添加 :first 伪选择器可确保找到第一个。

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

有没有可能浏览器只是在加载一个新页面？我没有看到你调用 event.preventDefault()，事实上你没有在你的代码中捕获事件，你只是响应它......

此外，.on 是现在绑定(bind)到事件的首选方式:

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

    })

})