Bootstrap navbar Aktif Durumu çalışmıyor

Bootstrap v3'üm var.

Kullandığım class="active"on my navbarve menü öğelerini bastığımda o geçiş değil. Bunu nasıl yapacağımı jQueryve bir tıklama işlevi oluşturacağımı biliyorum, ancak bu işlevin önyüklemeye dahil edilmesi gerektiğini düşünüyorum. Yani belki bu bir JavaScript sorunudur?

İşte dahil ettiğim js / css / bootstrap dosyalarımla başlığım:

<!-- 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>

İşte navbarkodum:

<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>

Bunu doğru ayarlıyor muyum?

(İlgisiz bir not ama olasılıkla ilgili mi? Menü mobil hale geldiğinde menü düğmesini tıklıyorum ve daralıyor. Tekrar basmak onu daraltmıyor. Yani bu sorun, diğeriyle birlikte, her ikisi de yanlış JavaScript kurulumunu gösterir belki?)

Dokümanlar şunları belirtirken küçültülmüş Bootstrap js dosyasını ve daraltma / geçiş eklentilerini dahil ettiniz:

Hem bootstrap.js hem de bootstrap.min.js, tüm eklentileri tek bir dosyada içerir.
Yalnızca bir tane dahil edin.

ve

Basit geçiş efektleri için, diğer JS dosyalarıyla birlikte bir kez transition.js ekleyin. Derlenmiş (veya küçültülmüş) bootstrap.js kullanıyorsanız, bunu eklemenize gerek yoktur - zaten oradadır.

Bu, sorunu en aza indirmek için sizin probleminiz olabilir.

Aktif sınıf için, onu kendiniz yönetmelisiniz, ancak bu sadece bir veya iki satırdır.

Önyükleme 3:

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

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

Önyükleme 4:

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

Etkin sayfaları değiştirmek için benim çözümüm buydu

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
});

Bu benim için mükemmel çalıştı, çünkü "window.location.pathname" gerçek sayfa adından önce de veri içeriyor, örneğin directory / page.php. Dolayısıyla, gerçek gezinme çubuğu bağlantısı yalnızca url bu bağlantıyı içeriyorsa etkin olacak şekilde ayarlanacaktır.

$(document).ready(function() {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active', 
            window.location.pathname.indexOf($(this).find('a').attr('href')) > -1);
    }); 
});

Bootstrap 3.3.4 sürümü ile, uzun html sayfalarında pg'nin bölümlerine bakabilirsiniz. aktif navbar bağlantısını gövde öğesi ile spy-scroll ile yönetmek için sınıfa veya kimliğe göre:

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

Veri hedefi, id = "spy-scroll-id" olan bir div olacaktır

    <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>

Bu, herhangi bir javascript işlevi gerekmeksizin tıklayarak bağlantıları etkinleştirmelidir ve ayrıca, bir js onclick () işlevinin yapmayacağı, sayfanın ilgili bağlantılı bölümlerinde gezinirken her bir bağlantıyı otomatik olarak etkinleştirecektir.

Tek yapmanız gereken, bootstrap navbar içindeki bağlantınıza data-toggle = "tab" eklemektir :

<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>

Bağlantı bağlantılarını kullanmıyorsanız, şunun gibi bir şey kullanabilirsiniz:

$(document).ready(function () {
    $.each($('#navbar').find('li'), function() {
        $(this).toggleClass('active',
            '/' + $(this).find('a').attr('href') == window.location.pathname);
    });
});

Bootstrap 4 ile şunu kullanabilirsiniz:

$(document).ready(function() {
    $(document).on('click', '.nav-item a', function (e) {
        $(this).parent().addClass('active').siblings().removeClass('active');
    });
});

Bu zarif çözüm benim için hile yaptı. Herhangi bir yeni fikir / öneriye açığız.

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

Yalnızca erişilen öğeyi etkin ve kardeşlerini devre dışı bırakmak için jQuery'nin "siblings ()" yöntemini kullanabilirsiniz.

Bugün bununla mücadele ediyorum, data-togle yalnızca tek sayfalık bir uygulamadaysam çalıştı.

İçeriği yüklemek için ajax kullanmıyorum, aslında diğer sayfalar için gönderi isteği yapıyorum, bu yüzden ilk js betiği de işe yaramazdı. Bunu şu satırlarla çözüyorum:

var active = window.location.pathname;
$(".nav a[href|='" + active + "']").parent().addClass("active");

Umarım bu, bu sorunu çözmeye yardımcı olur.

      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";
            });
        });

Dinamik olarak oluşturulmuş liste öğeleri - WordPress Stack kullanarak bu konuda biraz acı çektim.

Bunu ekledi ve işe yaradı:

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

Anında yapacağım.

Bunu kullanıyorum. Kısa, şık ve anlaşılması kolay.

$(document).ready(function() {
    $('a[href$="' + location.pathname + '"]').addClass('active');
});

"Active" sınıfı, bootstrap ile kutunun dışında yönetilmez. Sizin durumunuzda, PHP kullandığınız için şunları görebilirsiniz:

Php ile html menüsüne class = 'active' nasıl eklenir?

size çoğunlukla otomatikleştirme yöntemiyle yardımcı olmak için.

Önyükleme mobil menüsü için, bir öğeye tıkladıktan sonra daraltmayı kaldırma için bunu kullanabilirsiniz

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

    $(".navbar-collapse").removeClass("in");
});

Bootstrap bare temasını kullanıyorum, işte örnek navbar kodu. Java betiğinde bahsedildiği için -> .nav - öğesinin sınıf adına dikkat edin .

/ 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

görünüm sayfasında (veya kısmi) şunu ekleyin: javascript, bunun sayfa her yüklendiğinde yürütülmesi gerekir.

haml görünümü pasajı ->

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

Javascript hata ayıklayıcısında window.location.pathname ile eşleşen 'href' özniteliğinin değerine sahip olduğunuzdan emin olun. Bu, sorunumu çözmeme yardımcı olan @Zitrax çözümünden biraz farklı.

İçin AngularJSkullanabilirsinizng-class böyle bir işlevle:

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>

Ve kontrolör

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 kullanıyorsanız, hash olmayacaktır. Böylece, $ location kullanarak gerekli dizeyi URL'den çıkarabilirsiniz.

Aşağıdaki her durumda işe yaramayacaktır ->

Aşağıdaki gibi bir kapsam değişkeni kullanmak yalnızca tıklandığında işe yarar, ancak geçiş $state.transitionToveya window.location kullanılarak yapılırsa veya URL'nin manuel olarak güncellenmesi durumunda, Sekme değeri güncellenmez.

<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>

Bu JavaScript'i ana js dosyanıza ekleyin.

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

Dosya isimlerim gezinme çubuğu başlıklarımla aynı olmadığı için bir adım ileri gitmem gerekti. yani, ilk gezinti çubuğu bağlantım HOME idi ancak dosya adı indekstir ..

Bu yüzden sadece yol adını alın ve eşleştirin.

Açıkçası bu kaba bir örnek ve daha verimli olabilir, ancak oldukça özel bir ihtiyaçtır.

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

Benim için çalışan Bootstrap 4 çözümü:

$(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();
});

Bu yalnızca href location.pathname içeriyorsa çalışır !

Sitenizi kendi bilgisayarınızda test ediyorsanız (wamp, xampp, lamba vb. Kullanarak) ve siteniz bir alt klasörde bulunuyorsa, yolunuz aslında "/somefolder/something.php" olur, bu yüzden anlamayın Şaşkın.

Doğru konumun ne olduğundan emin olabilmeniz için aşağıdaki kodu kullanmaktan emin değilseniz tavsiye ederim :

$(document).ready(function() {
  alert(location.pathname);
});

bir sonraki cevap, çok seviyeli bir menüye sahip olanlar içindir:

var url = window.location.href;

var els = document.querySelectorAll(".dropdown-menu a");
for (var i = 0, l = els.length; i < l; i++) {
    var el = els[i];
    if (el.href === url) {
       el.classList.add("active");
       var parent = el.closest(".main-nav"); // add this class for the top level "li" to get easy the parent
       parent.classList.add("active");
    }
}

JavaScript'i bilmeyen biri olarak işte benim için çalışan ve anlaşılması kolay bir PHP yöntemi. Gezinme çubuğumun tamamı, sayfalarımdan dahil ettiğim ortak bileşenler dosyasında bulunan bir PHP işlevinde. Örneğin benim 'index.php' sayfamda ... '

<?php
   $calling_file = basename(__FILE__);
   include 'my_common_includes.php';    // Going to use my navbar function "my_navbar"
   my_navbar($calling_file);    // Call the navbar function
 ?>

Sonra 'my_common_includes.php'de var ...

<?php
   function my_navbar($calling_file)
   {
      // All your usual nabvbar code here up to the menu items
      if ($calling_file=="index.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="index.php">Home</a>
</li>';
      if ($calling_file=="about.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="about.php">About</a>
</li>';
      if ($calling_file=="galleries.php")   {   echo '<li class="nav-item active">';    } else {    echo '<li class="nav-item">';   }
    echo '<a class="nav-link" href="galleries.php">Galleries</a>
</li>';
       // etc for the rest of the menu items and closing out the navbar
     }
  ?>

Bootstrap 4, liöğeyi aktif sınıflar için hedeflemenizi gerektirir . Bunu yapmak için a. 'Hitbox' akadar büyüktür, liancak JS'deki olayın köpürmesi nedeniyle size aetkinliği geri verecektir . Bu nedenle, onu üstüne manuel olarak eklemeniz gerekir.

  //set active navigation after click
  $(".nav-link").on("click", (event) => {
    $(".navbar-nav").find(".active").removeClass('active');
    $(event.target).parent().addClass('active');
  });

İlk 5 çözümü ve bunların farklı varyasyonlarını denedim ama benim için işe yaramadı.

Sonunda bu iki fonksiyonla çalıştırdım.

$(document).on('click', '.nav-link', function () {
    $(".nav-item").find(".active").removeClass("active");
})

$(document).ready(function() {
    $('a[href="' + location.pathname + '"]').closest('.nav-item').addClass('active'); 
});

navbar kodu için her sayfa için header.php kullandığınızda, jquery çalışmaz, aktif uygulanır ve sonra kaldırılır, basit bir çözüm aşağıdaki gibidir

her sayfada <?php $pageName = "index"; ?>Dizin sayfasında değişken ayarlayın ve benzer şekilde <?php $pageName = "contact"; ?> Bize Ulaşın sayfasında ayarlayın

daha sonra header.php'yi çağırın (yani nav kodu header.php'de) <?php include('header.php'); >

header.php'de her nav bağlantısının aşağıdaki gibi olduğundan emin olun

<a class="nav-link <?php if ($page_name == 'index') {echo "active";} ?> href="index.php">Home</a>

<a class="nav-link <?php if ($page_name == 'contact') {echo "active";} ?> href="contact.php">Contact Us</a>

umarım bu, jQuery'nin çalışması için günler harcadığım ancak başarısız olmama neden olur,

eğer birisi header.php dahil edildiğinde ve sonra sayfa yüklendiğinde sorunun tam olarak ne olduğunu açıklarsa ... jquery neden aktif sınıfı nav-link'e eklemekte başarısız olur .. ??

Bootstrap 4 navbars ve diğer bağlantı gruplarında kullanabileceğim bir çözüm arıyorum.

Bir nedenden ötürü veya başka bir nedenle çoğu çözüm işe yaramadı, özellikle bağlantılara 'aktif' eklemeye çalışanlar, çünkü tabii ki bağlantı tıklandığında sizi başka bir sayfaya götürürse, o zaman eklediğiniz 'aktif' olmayacaktır. orada çünkü DOM değişti. Diğer çözümlerin çoğu, genellikle bağlantıyla eşleşmediği veya birden fazla eşleştiği için işe yaramadı.

Bu zarif çözüm, farklı bağlantılar için uygundur, yani: about.php, index.php, vb ...

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active');
});

Ancak, index.php? Tag = a, index.php? Tag = b, index.php? Tag = c gibi farklı sorgu dizeleri ile aynı bağlantılara geldiğinde, hangisi tıklandıysa, hepsini aktif olarak ayarlardı. sorgu ile değil yol adıyla eşleşir.

Bu yüzden, yol adı ve sorgu dizgisiyle eşleşen bu kodu denedim ve sorgu dizeleriyle tüm bağlantılarda çalıştı, ancak index.php gibi bir bağlantı tıklandığında, benzer sorgu dizesi bağlantılarını da aktif hale getirecekti. Bunun nedeni, işlevimin bağlantıda sorgu dizesi yoksa yine yol adıyla eşleşen boş bir dizge döndürmesidir.

$(function() {
   $('nav a[href^="' + location.pathname.split("/")[2] + returnQueryString(location.href.split("?")[1]) + '"]').addClass('active');
});
/** returns a query string if there, else an empty string */
function returnQueryString (element) {
   if (element === undefined)
      return "";
   else
      return '?' + element;
}

Böylece sonunda bu rotayı terk ettim ve basit tuttum ve bunu yazdım.

$('.navbar a').each(function(index, element) {
    //console.log(index+'-'+element.href);
    //console.log(location.href);
    /** look at each href in the navbar
      * if it matches the location.href then set active*/
    if (element.href === location.href){
        //console.log("---------MATCH ON "+index+" --------");
        $(element).addClass('active');
    }
});

Sorgu dizeleri olan veya olmayan tüm bağlantılarda çalışır çünkü element.href ve location.href her ikisi de tam yolu döndürür. Diğer menüler vb. İçin ana sınıf seçiciyi (navbar) başka bir şekilde değiştirebilirsiniz, yani:

$('.footer a').each(function(index, element)...

Ayrıca önemli görünen son bir şey, kullandığınız js & css kitaplıklarıdır, ancak bu belki başka bir yazıdır. Umarım bu yardımcı olur ve katkıda bulunur.