it-roy-ru.com

как установить активный класс в меню навигации из Twitter начальной загрузки

Я новичок в загрузчик 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 в самом файле макета?  

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

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

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

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

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

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

23
Priyanka

это обходной путь. пытаться 

<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');
});
18
dakait

Вы можете использовать этот код 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> родительский <ul> как активный.

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


Первоначальный источник:

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

68
Leniel Maccaferri

У меня была та же проблема ... я решил ее, добавив код, показанный ниже, в часть "$ (document) .ready" моего файла "functions.js", которая включена в каждый нижний колонтитул страницы. Это довольно просто. Он получает полный текущий URL отображаемой страницы и сравнивает его с полным URL-адресом привязки. Если они одинаковы, установите anchor (li) parent как активный. И делайте это только в том случае, если значение привязки 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;
                    }
            }
        }); }); });
3
Mirko
<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');
            });
1
anyavacy

Вы можете добавить разные классы к тегу 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 к правильному элементу навигации на основе этого тега.

1
Billy Moat
<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 
1
Apeto

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

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

Первая строка, js-код получает элемент. Итак, вы должны идентифицировать каждый из элементов с идентификатором. Я покажу пример ниже. Во второй строке вы добавляете класс active. Вы можете увидеть HTML идентификаторы ниже. 

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
        <li>
            <a id="speed" href="{{ url_for('list_gold_per_item',item_kind='speed',level='2') }}">
                <h2>Speed</h2>
            </a>
        </li>
        <li>
            <a id="life" href="{{ url_for('list_gold_per_item',item_kind='life',level='3') }}">
                <h2>Life</h2>
            </a>
        </li>
    </ul>
</div>

0
alexmoitta
(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>
0
YanZhiwei

Для одностраничных сайтов я использовал следующее. Он не только устанавливает активный элемент на основе того, на что нажали, но также проверяет хеш-значение в расположении 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" );

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

проверь это. 

0
Hardik Gajjar

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

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