Question

所以我有一个模板，我的网站上的所有页面都是从中创建的。以下是我想要的示例：fiddle

但是，在我的网站上，由于这些链接转到特定页面（即当您单击about链接时About.html），该页面将加载html

<div class="container">
    <div class="masthead">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Calendar</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

会发生什么：
1）我点击导航栏中的about链接
2）页面指向About.html
3）Navbar突出显示关键链接一秒钟（执行该jquery代码）
4）当页面加载时，由于<li class="active"><a href="#">Home</a></li>

，Home再次成为活动类

所以基本上你点击的链接突出显示一秒钟然后再次突出显示主页。如何让它像小提琴一样工作（链接在导航栏中保持突出显示）？

Answer 1

从html中删除默认的li.active，因此请替换以下行：

<li class="active"><a href="#">Home</a></li>

这个：

<li><a href="#">Home</a></li>

然后通过查看网址加载页面时设置活动li，如下所示：

$(document).ready(function(){
    $('.nav li a').click(function (e) {
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).parent().addClass('active');
    }).each(function() {
        if ( location.href.indexOf('about.html') && $(this).text() == 'About') {
             $(this).parent().addClass('active');
        } else if (location.href.indexOf('calendar.html') && $(this).text() == 'Calendar') {
             $(this).parent().addClass('active');
        }
    });
});

Bootstrap Nav Bar JQuery部分修复

1 个答案: