Начальной загрузки активной навигации государство не работает

у меня есть bootstrap v3.



Я использую class="active" наnavbar и он не переключается при нажатии пунктов меню. Я знаю, как это сделать с jQuery и построить функцию щелчка, но я думаю, что эта функция должна быть включена в bootstrap? Так, может быть, это проблема JavaScript?



вот мой заголовок с моими файлами js/css / bootstrap, которые я включил:



<!-- Bootstrap CSS -->

<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<link rel="stylesheet" href= "/stylesheets/styles.css" />



<!--jQuery -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>



<!-- Bootstrap JS -->

<script src="/bootstrap/js/bootstrap.min.js"></script>

<script src="/bootstrap/js/bootstrap-collapse.js"></script>

<script src="/bootstrap/js/bootstrap-transition.js"></script>


вот мой navbar код:



<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse">

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>



                <a class="navbar-brand" href="/index.php">MyBrand</a>

            </div>



            <div class="collapse navbar-collapse navbarCollapse">

                <ul class="nav navbar-nav navbar-right">

                    <li class="active">

                        <a href="/index.php">Home</a>

                    </li>



                    <li>

                        <a href="/index2.php"> Links</a>

                    </li>



                    <li>

                        <a href="/history.php">About</a>

                    </li>

                    <li>

                        <a href="/contact.php">Contact</a>

                    </li>



                    <li>

                        <a href="/login.php">Login</a>

                    </li>

                </ul>

            </div>

        </div>

    </nav>


я настраиваю это верно?



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

542   18  

18 ответов:

вы включили минифицированный файл JS Bootstrap и свернуть / переход плагины в то время как документы утверждают, что:

оба bootstrap.js и bootstrap.минута.Яш содержат все плагины в одном файле.
Включите только один.

и

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

Так что вполне может быть ваша проблема для минимизации проблемы.

для активного класса, вы должны управлять им самостоятельно, но это только одна или две строки.

Bootstrap 3:

$(".nav a").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

Bootply:http://www.bootply.com/IsRfOyf0f9

Bootstrap 4:

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});
120  
2018-03-09 10:44:28

вот мое решение для переключения активных страниц

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});
50  
2016-04-08 17:18:55

с версией 3.3.4 bootstrap, на длинных html-страницах вы можете ссылаться на разделы страницы. по классу или идентификатору для управления активной ссылкой navbar с помощью spy-scroll с элементом body:

  <body data-spy="scroll" data-target="spy-scroll-id">

цель данных будет div с id= "spy-scroll-id"

    <div id="spy-scroll-id" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#topContainer">Home</a></li>
        <li><a href="#details">About</a></li>
        <li><a href="#carousel-container">SlideShow</a></li>
      </ul>
    </div>

это должно активировать ссылки, щелкнув без каких-либо функций javascript, а также автоматически активировать каждую ссылку при прокрутке соответствующих связанных разделов страницы, которые а JS onclick () не будет.

13  
2015-05-04 09:44:33

это работает perfekt для меня, причина " окно.местоположение.pathname " также содержит данные перед реальным именем страницы, например каталог / страница.РНР. Таким образом, фактическая ссылка navbar будет активна только в том случае, если url-адрес содержит эту ссылку.

$(document).ready(function() {
    // -----------------------------------------------------------------------
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
    // -----------------------------------------------------------------------
});
12  
2016-03-11 12:02:43

Если вы не используете анкор ссылки, вы можете использовать что-то вроде этого:

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});
9  
2016-05-21 00:46:18

все, что вам нужно сделать, это просто добавить data-toggle= "tab" к вашей ссылке внутри bootstrap navbar, как это:

<ul class="nav navbar-nav">
  <li class="active"><a data-toggle="tab" href="#">Home</a></li>
  <li><a data-toggle="tab" href="#">Test</a></li>
  <li><a data-toggle="tab" href="#">Test2</a></li>
</ul>
7  
2016-10-26 12:58:34

это элегантное решение сделал трюк для меня. Любые новые идеи/предложения приветствуются.

$( document ).on( 'click', '.nav-list li', function ( e ) {
    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );
} );

вы можете использовать метод jQuery "siblings ()", чтобы поддерживать только активный элемент доступа, а его братья и сестры неактивны.

4  
2015-12-03 09:21:55

С Bootstrap 4 Вы можете использовать это:

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});
4  
2017-03-27 21:39:03

Я боролся с этим сегодня, data-togle работал только если я на одной странице приложения.

Я не использую ajax для загрузки контента, который я фактически делаю post-запрос для других страниц, поэтому первый сценарий js тоже был бесполезен. Я решаю это с помощью следующих строк:

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");
2  
2016-06-28 01:32:28

Я надеюсь, что это поможет решить эту проблему.

      var navlnks = document.querySelectorAll(".nav a");
        Array.prototype.map.call(navlnks, function(item) {

            item.addEventListener("click", function(e) {

                var navlnks = document.querySelectorAll(".nav a"); 

                Array.prototype.map.call(navlnks, function(item) {

                    if (item.parentNode.className == "active" || item.parentNode.className == "active open" ) {

                        item.parentNode.className = "";

                    } 

                }); 

                e.currentTarget.parentNode.className = "active";
            });
        });
1  
2015-06-02 18:41:43

У меня была некоторая боль с этим, используя динамически генерируемые элементы списка - стек WordPress.

добавил Это, и это сработало:

$(document).ready(function () {
    $(".current-menu-item").addClass("active");
});

будет делать это на лету.

1  
2016-07-06 12:55:20

класс "active" не управляется из коробки с bootstrap. В вашем случае, так как вы используете PHP, вы можете увидеть:

как добавить class= 'active' в меню html с php

чтобы помочь вам с методом в основном автоматизации его.

0  
2017-05-23 14:47:25

для bootstrap mobile меню un-свернуть после нажатия на элемент вы можете использовать это 

$("ul.nav.navbar-nav li a").click(function() {    

    $(".navbar-collapse").removeClass("in");
});
0  
2015-10-06 00:04:19

Я м, используя тема ушко чуть-чуть, вот пример кода навигации. Обратите внимание на имя класса элемента -> .nav - как это указано в Java script.

/ Collect the nav links, forms, and other content for toggling
    #bs-example-navbar-collapse-1.collapse.navbar-collapse
      %ul.nav.navbar-nav
        %li
          %a{:href => "/demo/one"} Page One
        %li
          %a{:href => "/demo/two"} Page Two
        %li
          %a{:href => "/demo/three"} Page Three

на странице просмотра (или частично) добавьте это: javascript, это должно выполняться каждый раз при загрузке страницы.

haml посмотреть фрагмент ->

- content_for :javascript do
  :javascript
      $(function () {
          $.each($('.nav').find('li'), function() {
              $(this).toggleClass('active',
                  $(this).find('a').attr('href') == window.location.pathname);
          });
      });

в отладчике javascript убедитесь, что значение атрибута' href ' совпадает с window.местоположение.имя пути. Это немного отличается от решения @Zitrax, который помог мне решить мою проблему.

0  
2016-06-03 01:33:44

на AngularJS, вы можете использовать ng-class С такой функцией:

HTML ->

<nav class="navbar navbar-default" ng-controller="NavCtrl as vm">
  <div class="container">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav" >
        <li ng-class="vm.Helper.UpdateTabActive('Home')"><a href="#" ng-click>Home</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('About')"><a href="#about">About</a></li>
        <li ng-class="vm.Helper.UpdateTabActive('Contact')"><a href="#contact">Contact</a></li>        
      </ul>
    </div>
</nav>

и контролером 

app.controller('NavCtrl', ['$scope', function($scope) {
    var vm = this;
    vm.Helper = {
        UpdateTabActive: function(sTab){
            return window.location.hash && window.location.hash.toLowerCase() == ("#/" + sTab).toLowerCase() ? 'active' : '';
        }
    }    
}]);

если вы используете $location, то хэша не будет. Таким образом, вы можете извлечь необходимую строку из URL с помощью $location

не будет работать во всех случаях -->

использование переменной области видимости, как показано ниже, будет работать только при нажатии, но если переход осуществляется с помощью $state.transitionTo или окно.расположение или вручную обновить URL, значение вкладки не будет обновляться

<ul class="nav navbar-nav" ng-init="Tab='Home'">
   <li ng-class="Tab == 'Home' ? 'active' : ''"><a href="#" ng-click="Tab = 'Home'">Home</a></li>
   <li ng-class="Tab == 'About' ? 'active' : ''"><a href="#" ng-click="Tab = 'About'">About</a></li>
</ul>
0  
2016-10-12 18:40:32

добавьте этот JavaScript в ваш основной файл js.

$(".navbar a").on("click", function(){
      $(".navbar").find(".active").removeClass("active");
      $(this).parent().addClass("active");
    });
0  
2018-04-05 15:56:17

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

поэтому просто возьмите путь и соответствовать ему.

очевидно, что это грубый пример и может быть более эффективным, но весьма пользовательские потребности.

var loc_path = location.pathname;
$('li.active').removeClass('active');



if(loc_path.includes('index')){
    $('li :eq(0)').addClass('active');
}else if(loc_path.includes('blog')){
    $('li :eq(2)').addClass('active');
}else if(loc_path.includes('news')){
    $('li :eq(3)').addClass('active');
}else if(loc_path.includes('house')){
    $('li :eq(4)').addClass('active');
}
0  
2018-05-21 07:18:44

Bootstrap 4 решение, которое работало для меня:

$(document).ready(function() {
//You can name this function anything you like
function activePage(){
//When user lands on your website location.pathname is equal to "/" and in 
//that case it will add "active" class to all links
//Therefore we are going to remove first character "/" from the pathname
  var currentPage = location.pathname;
  var slicedCurrentPage = currentPage.slice(1);
//This will add active class to link for current page
  $('.nav-link').removeClass('active');
  $('a[href*="' + location.pathname + '"]').closest('li').addClass('active');
//This will add active class to link for index page when user lands on your website
     if (location.pathname == "/") {
         $('a[href*="index"]').closest('li').addClass('active');
    }
}
//Invoke function
activePage();
});

это будет работать только если href содержит расположение.путь!

Если вы тестируете свой сайт на своем собственном ПК (используя wamp, xampp, lamp и т. д...) и ваш сайт находится в какой-то подпапке, то ваш путь на самом деле "/somefolder/something.php", так что не путайтесь.

Я бы предложил, если вы не уверены, используйте следующий код, чтобы убедиться, что это правильно расположение.путь:

$(document).ready(function() {
  alert(location.pathname);
});
0  
2018-07-15 06:19:43

Comments

    Ничего не найдено.
Click here to cancel reply.