Question

使用下面的bootstrap导航栏。

        <div class="navbar-default">              
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="Link1">Link1</a>
                </li>
                <li>
                    <a href="Link2">Link2</a>
                </li>
            </ul>
        </div>

使用下面的jquery来激活链接

 $(document).ready(function () {
    $('ul.nav > li').click(function (e) {
        e.preventDefault();
        $('ul.nav > li').removeClass('active');
        $(this).addClass('active');
    });
});

使用上面的代码时，活动类工作正常，但页面没有加载。

当评论e.preventDefault（）;页面正在加载，但活动类无法正常工作。

Answer 1

对于您的问题，我们假设有两个HTML网页：page1.html和page2.html。忽略您的JavaScript，当您点击page1.html上的链接时，它会转到page2.html。如果您将active类设置为page2.html中的相应链接，则它应该有效（将链接设置为page2.html作为活动链接。）

在JavaScript中，e.preventDefault()会阻止默认操作。在这种情况下，它会阻止网页重定向到新链接。即使您以某种方式设法使其工作，当您加载page2.html时，之前在page1.html（设置活动类）上运行的任何JavaScript都转移到{{ 1}}。所以JavaScript没用。

只需编辑page2.html的有效链接就可以了，而不是尝试将Javascript应用到page2.html并将其转移到page1.html。

使用jquery引导导航栏活动类

1 个答案: