Bootstrap Nav Bar JQuery частично исправлен

Итак, у меня есть шаблон, из которого создаются все страницы моего сайта. Вот пример того, что я хочу: скрипка

Однако на моем сайте, поскольку эти ссылки ведут на определенную страницу (например, 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) я нажимаю ссылку "О программе" на панели навигации
2) страница ведет на страницу About.html
3) на панели навигации на секунду выделяется ссылка "О программе" (выполнение этого кода jquery)
4) Когда страница загружается, Home снова становится активным классом из-за <li class="active"><a href="#">Home</a></li>

Таким образом, ссылка, по которой вы щелкаете, подсвечивается на секунду, а затем снова подсвечивается дом. Как заставить его работать как в скрипке (где ссылки остаются выделенными на панели навигации)?


html jquery twitter-bootstrap navbar
person Richard    schedule 14.04.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Удалите li.active по умолчанию из html, поэтому замените следующую строку:

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

для этого:

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

Затем установите активный li при загрузке страницы, посмотрев на URL-адрес, примерно так:

$(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');
        }
    });
});
person Nelson    schedule 14.04.2013