Bootstrap .active state alt menüsü düzgün çalışmıyor

Bir ana nav'a ve bir alt menüye sahip olan this theme uygularım.Bootstrap .active state alt menüsü düzgün çalışmıyor

.active sınıfının doğru şekilde görüntülenmesi konusunda sorun yaşıyorum. Ben sayfasını yüklediğinizde

doğru olduğundan:

Ama başka bir sayfaya, örneğin tıkladığınızda istemciler: Gösterge panosu vurgulanmış olarak kalır.

Yani jQuery biraz ekledi:

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

Ve bu aktif sınıf müşteriye taşımak, ancak sayfa yüklenirken olan tek ise, o zaman Tablosu'na geri gider neden yok. İşte

(sayfa Müşteriler üzerine) çıktısı:

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav side-nav"> 
      <li class="active"> 
       <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
      </li> 
      <li> 
       <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a> 
      </li>

Here is a fiddle, ancak yalnızca ön sayfa gösterir beri hatayı görmezsiniz.

Açıkçası burada bir numara eksik.

Bir düzen sayfası (Java Bahar) kullanıyorum bu yüzden bu benim düzen sayfa aşağıdaki gibi görünür Güncelleme:

<body> 
<div id="wrapper"> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
.... 
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav side-nav"> 
      <li class="active"> 
       <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
      </li> 
      <li> 
       <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a> 
      </li> 
      ... 
</nav> 
<div id="page-wrapper"> 
    <div class="container-fluid"> 
     <!--here is where all my content goes--> 
     <section layout:fragment="mainContent"> 
      <!-- Content replaced by each page's content fragment --> 
      <p>This section will not render, overriden by child</p> 
     </section> 
     ...

Ve sonra benim clients.html sayfa aşağıdaki gibi görünecektir:

... 
<body> 
<div layout:fragment="mainContent"> 
    ... 
</div>

Sayfadaki bir sayfadan diğerine atladığı zaman, sabit kodlanmış .active sınıfı problemdir, çünkü düzeni yükler ve orada .active sınıfı sabit kodlanmış panoyu görür.

kaynak

2016-03-31 gudthing

Her sayfa için farklı bir .html sayfanız var mı? Örneğin, kontrol paneli sayfası dashboard.html ve grafikler sayfası charts.html nedir? Eğer öyleyse, gösterge sayfasında html'nizde kodlanmış "etkin" bir sınıfa sahip olursunuz, böylelikle grafikler sayfasına geçtiğinizde, aktif sınıf kontrol paneline geri döner. Her sayfa için farklı bir .html sayfanız varsa, html'deki "active" sınıfını geçerli sayfaya taşıyın –

@JoshSalazar Evet, farklı sayfalardayız ancak bir 'layout page' kullanıyorum, bu yüzden nav çubuğu Geçerli html sayfasından değil, düzenden yüklenir.Sayfanın nasıl göründüğünü göstermek için cevabımı güncelleyeceğim. – gudthing

@JoshSalazar Ne olduğunu görüyorum. Bunu nasıl atlayabilirim? Haklısınız, sayfam her yüklendiğinde, gösterge panosunun '.active' sınıfına sahip olduğunu görerek yüklemeyi yapıyor. – gudthing

Tamam oldukça çirkin bir çözüm buldum ama işe yarıyor gibi görünüyor.

JQuery ile geçerli öğeye bir sınıf active yükledikten sonra kullanıcı sayfadan çıktığında etkin sınıfı kaldırırım.

<ul id="submenu" class="nav navbar-nav side-nav"> 
    <li id="submenu-dashboard" > 
     <a href="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a> 
      </li> 
    <li id="submenu-clients"> 
     <a href="/clients"><i class="fa fa-fw fa-bar-chart-o"></i> Clients</a> 
    </li> 
    ...

JQuery:

//removes active state from all pages before it unloads 
$(window).bind('beforeunload', function(){ 
    $('#submenu li').each(function(){ 
     $(this).removeClass("active"); 
    }); 
}); 

//adds active state to the current page on load 
$(document).ready(function() { 
    var currentPage = $(location).attr('pathname').replace('/', ''); 
    $('#submenu li').each(function() { 
     var itemId = $(this).attr('id'); 

     //we check the currentPage matches the Id 
     if (itemId.indexOf(currentPage) >= 0) { 
      $(this).addClass("active"); 
      return false; 
     } 
    }); 
});

Not: MUST URL'sini içerirler li elemanın id

benim liste yapısı eklemenin bazı kimlikleri küçük bir değişiklik yapmak zorunda kaldı sayfa.

kaynak

2016-04-01 08:47:16 gudthing

Bootstrap .active state alt menüsü düzgün çalışmıyor

cevap

İlgili konular