0

所以我有一个模板，我网站上的所有页面都是从中创建的。这是我想要的一个例子：小提琴

但是，在我的网站上，由于这些链接会转到特定页面（即单击 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）导航栏突出显示 About 链接一秒钟（执行该 jquery 代码）
4）当页面加载时，主页变为活动状态再次上课是因为<li class="active"><a href="#">Home</a></li>

因此，基本上您单击的链接会突出显示一秒钟，然后主页再次突出显示。我如何让它像小提琴一样工作（链接在导航栏中保持突出显示）？

4

1 回答 1

1

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

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

对于这个：

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

然后通过查看 url 在页面加载时设置活动 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');
        }
    });
});
于 2013-04-14T03:14:28.290 回答