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

发布时间：2020-12-17 21:32:06 所属栏目：安全来源：网络整理

导读：我使用bootstrap twitter,我希望菜单中的不同网站在点击时显示为活动状态.我发现问题 Bootstrap Twitter CSS Active Navigation处理这个问题. 我的问题是我无法在其中一个答案中使用JQuery函数.修改应该非常直接,以使其在我的情况下工作,在HTML中是： script

我使用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>

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

解决方法

要在第一个答案的评论中回答你的问题,.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');
        }

    })

})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!