Как установить активный класс в меню навигации из twitter bootstrap

Я новичок в бутстрапе twitter. Использование там навигационных меню. Я пытаюсь установить активный класс в выбранное меню. мое меню -

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="broker"><a href="~/Home/Broker">Broker</a></li>
    <li><a href="#">Sale</a></li>
  </ul>
</div>

Я попытался последовать за Google после этого, чтобы установить активный класс на каждой странице из меню, например, как

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

но проблема для выше - это то, что я устанавливаю домашнее меню, выбранное по умолчанию. Затем он всегда выбирается. Есть ли другой способ сделать это?, или я могу обобщить и сохранить js в самом файле макета?

После выполнения приложения мое меню выглядит -

после нажатия на другой пункт меню я получаю следующий результат -

И я добавил следующие скрипты в представление индекса и вид брокера ---

<script>
  $(document).ready(function () {
    $('#home').addClass('active');
  });
</script>

<script>
  $(document).ready(function () {
    $('#broker').addClass('active');
  });
</script>

соответственно.

Ответ 1

это обходной путь. попробуйте

<div class="nav-collapse">
  <ul class="nav">
    <li id="home" class="active"><a href="~/Home/Index">Home</a></li>
    <li><a href="#">Project</a></li>
    <li><a href="#">Customer</a></li>
    <li><a href="#">Staff</a></li>
    <li  id="demo"><a href="~/Home/demo">Broker</a></li>
    <li id='sale'><a href="#">Sale</a></li>
  </ul>
</div>

и на каждой странице js добавить

$(document).ready(function () {
  $(".nav li").removeClass("active");//this will remove the active class from  
                                     //previously active menu item 
  $('#home').addClass('active');
  //for demo
  //$('#demo').addClass('active');
  //for sale 
  //$('#sale').addClass('active');
});

Ответ 2

Вы можете использовать этот JavaScript\jQuery код:

// Sets active link in Bootstrap menu
// Add this code in a central place used\shared by all pages
// like your _Layout.cshtml in ASP.NET MVC for example
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

Он установит родительский <a> <li> и <li> parent <ul> как активный.

Простое решение, которое работает!

Исходный источник:

Bootstrap добавляет активный класс в li

Ответ 3

У меня была такая же проблема... она решила его, добавив код, показанный ниже, в Into "$ (document).ready" часть моего файла "functions.js", который включен в каждую нижнюю часть страницы. Это довольно просто. Он получает полный URL-адрес отображаемой страницы и сравнивает его с полным URL-адресом привязки href. Если они одинаковы, установите привязку (li) как активную. И делайте это только в том случае, если значение href привязки не является "#", тогда бутстрап решит его.

$(document).ready(function () {         
    $(function(){
        var current_page_URL = location.href;

        $( "a" ).each(function() {

            if ($(this).attr("href") !== "#") {

                var target_URL = $(this).prop("href");

                    if (target_URL == current_page_URL) {
                        $('nav a').parents('li, ul').removeClass('active');
                        $(this).parent('li').addClass('active');

                        return false;
                    }
            }
        }); }); });

Ответ 4

Вы можете добавить diffrent-класс в тег BODY на каждой странице, например. на домашней странице вы можете получить следующее:

<body class="nav-1-on">

Тогда это css:

.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a {
     // set your styles here
}

Элемент NAV:

<ul>
  <li class="nav-1"><a href="#">Home</a></li>
  <li class="nav-2"><a href="#">Services</a></li>
  <li class="nav-3"><a href="#">About</a></li>
  <li class="nav-4"><a href="#">Contact</a></li>
</ul>

В качестве альтернативы вы можете разместить класс на BODY на каждой странице, а затем захватить это через jQuery и добавить класс .active в правильный элемент навигации на основе этого тега.

Ответ 5

<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

то для каждой страницы вы добавляете следующее:

//домой

 $(document).ready(function () {
        $('.home').addClass('active');
    });

//Страница проекта

$(document).ready(function () {
            $('.Project').addClass('active');
        });

//Страница клиента

 $(document).ready(function () {
                $('.Customer').addClass('active');
            });

//страница сотрудника

 $(document).ready(function () {
                $('.Staff').addClass('active');
            });

Ответ 6

<div class="nav-collapse">
                <ul class="nav">
                    <li class="home"><a href="~/Home/Index">Home</a></li>
                    <li class="Project"><a href="#">Project</a></li>
                    <li class="Customer"><a href="#">Customer</a></li>
                    <li class="Staff"><a href="#">Staff</a></li>
                    <li class="Broker"><a href="~/Home/Broker">Broker</a></li>
                    <li class="Sale"><a href="#">Sale</a></li>
                </ul>
</div>

$('ul.nav>li.home>a').click();  // first. same to all the other options changing the li class name

Ответ 7

(function (window) {
bs3Utils = {}
bs3Utils.nav = {
    activeTab: function (tabId) {
        /// <summary>
        /// 设置需要展现的tab
        /// </summary>
        /// <param name="tabId"></param>
        $('.nav-tabs a[href="#' + tabId + '"]').tab('show');
    }
}
window.bs3Utils = bs3Utils;
})(window);

Пример:

var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2';
            bs3Utils.nav.activeTab(_actvieTab);
                        <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#portlet_tab2_1" data-toggle="tab">箱-单灯节点 </a>
                        </li>
                        <li>
                            <a href="#portlet_tab2_2" data-toggle="tab">箱-灯组节点 </a>
                        </li>

                    </ul>

Ответ 8

$( ".nav li" ).click(function() {
        $('.nav li').removeClass('active');
        $(this).addClass('active');
    });

проверьте это.

Ответ 9

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

$('.nav li').on('click', function(){
    $('.nav li').removeClass('active');
    $(this).addClass('active');
  });

Ответ 10

Для сайтов с одной страницей используется следующее. Он не только устанавливает активный элемент на основе щелчка, но также проверяет значение хэша в URL-адресе при начальной загрузке страницы.

$(document).ready(function () {

    var removeActive = function() {
        $( "nav a" ).parents( "li, ul" ).removeClass("active");
    };

    $( ".nav li" ).click(function() {
        removeActive();
        $(this).addClass( "active" );
    });

    removeActive();
    $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" );

});

Ответ 11

Я использую Flask Bootstrap. Мое решение немного проще, потому что мой шаблон уже получает параметр или выбор в качестве параметра из Flask.

var choice = document.getElementById("{{ item_kind }}");
choice.className += "active";

Ответ 12

Для тех, кто использует Codeigniter, добавьте это под меню боковой панели,

<script>
    $(document).ready(function () {
        $(".nav li").removeClass("active");
        var currentUrl = "<?php  echo current_url();  ?>";
        $('a[href="' + currentUrl + '"]').parents('li,ul').addClass('active');
    });
</script>

Ответ 13

Я добавил дополнительный класс в раздел ul с именем target-active

<ul class="nav navbar-nav target-active">
    <li><a href="/">HOME</a></li>
    <li><a href="find-truck">FIND A TRUCK</a></li>
    <li><a href="our-service">OUR SERVICES</a></li>
    <li><a href="about-us">ABOUT US</a></li>
</ul>

Если каждый тег li нажимает на новую страницу из другого места или того же места, не нужно добавлять функцию jquery removeClass.

Добавьте один простой код jquery на каждую страницу, чтобы получить желаемый результат.

1-я страница ссылки

$(function(){
    $(".target-active").find("[href='/']").parent().addClass("active");
});

Вторая страница ссылки

$(function(){
    $(".target-active").find("[href=find-truck]").parent().addClass("active");
});

Страница 3-й ссылки

$(function(){
    $(".target-active").find("[href=our-service]").parent().addClass("active");
});

Страница 4-й ссылки

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});