Jak zmienić klasę aktywną podczas klikania na inny link w bootstrapie użyj jquery?

Question

Mam html jako sidebar i używam Bootstrap.

<ul class="nav nav-list"> 
    <li class="active"><a href="/">Link 1</a></li> 
    <li><a href="/link2">Link 2</a></li> 
    <li><a href="/link3">Link 3</a></li> 
</ul> 

chcę zrobić kilka rzeczy:

Kiedy click łącza takie jak link 3, page content zmieni się zawartość 3 linku, a Link 3 będzie mieć klasę active i usunąć aktywny CLSS w link 1.

myślę, że to może być realizowane w jQuery i Przeszukałem wiele pytanie w SO, takich jak:

• How to keep an active link in nav list (twitter bootstrap)?
• Bootstrap CSS Active Navigation

używam tego skryptu:

$(document).ready(function() { 
    $('.nav li').click(function(e) { 

     $('.nav li').removeClass('active'); 

     var $this = $(this); 
     if (!$this.hasClass('active')) { 
      $this.addClass('active'); 
     } 
     //e.preventDefault(); 
    }); 
}); 

Ale większość z nich korzystać preventDefault będzie to zapobiec dalszemu działania. Nie może więc zmienić zawartości strony linku 3.

Jeśli usunąć oświadczenie preventDefault, gdy zawartość strony obciążenia łącza 3 jest aktywna klasa będzie z powrotem do Połącz 1.

Więc jest jakiś sposób, aby rozwiązać ten problem?

Answer 1

Jesteś zobowiązany kliknięciem niewłaściwy element, powinieneś związać go z a.

Zapobiega się wystąpieniu domyślnego zdarzenia na li, ale li nie ma domyślnego zachowania, a.

Spróbuj tego:

$(document).ready(function() { 
    $('.nav li a').click(function(e) { 

     $('.nav li.active').removeClass('active'); 

     var $parent = $(this).parent(); 
     $parent.addClass('active'); 
     e.preventDefault(); 
    }); 
}); 

Answer 2

przypadku zmiany klasy i załadować zawartość w obrębie tej samej funkcji powinno być w porządku.

$(document).ready(function(){ 
    $('.nav li').click(function(event){ 
     //remove all pre-existing active classes 
     $('.active').removeClass('active'); 

     //add the active class to the link we clicked 
     $(this).addClass('active'); 

     //Load the content 
     //e.g. 
     //load the page that the link was pointing to 
     //$('#content').load($(this).find(a).attr('href'));  

     event.preventDefault(); 
    }); 
}); 

Answer 3

Jeśli używasz kodu po stronie serwera jak Java potem trzeba wrócić aktywną nazwę zakładki i na stronie powrotnej mają jakąś funkcję wyłączyć (czyli usunąć aktywną klasę) wszystkie karty oprócz tej, którą zwrócony.

Wymagałoby to dodania identyfikatora lub nazwy do każdej karty. Trochę więcej pracy :)

Answer 4

Miałem ten sam problem wcześniej. Wypróbuj tę odpowiedź tutaj, działa na mojej stronie.

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

Źródło: To był oryginalny zamieszczone tutaj how to set active class to nav menu from twitter bootstrap

Answer 5

Używam startowej nawigację

To nie praca dla mnie w tym aktywny główny rozwijana i aktywnych dzieci

$(document).ready(function() { 
     var url = window.location; 
    // Will only work if string in href matches with location 
     $('ul.nav a[href="' + url + '"]').parent().addClass('active'); 

    // Will also work for relative and absolute hrefs 
     $('ul.nav a').filter(function() { 
      return this.href == url; 
     }).parent().addClass('active').parent().parent().addClass('active'); 
    }); 

Answer 6

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.nav li').click(function(){ 
     $(this).addClass('active'); 
     $(this).siblings().removeClass('active'); 

    }); 

}); 

Answer 7

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

Oto, co wymyśliłem. Sprawdza, czy element "li" ma klasę active, jeśli nie, pomija część klasy remove. Jestem trochę spóźniony na imprezę, ale mam nadzieję, że to pomoże. :)

Answer 8

Możesz używać plików cookie do zapisywania danych zwrotnych dotyczących zapamiętywania z jednej strony na inną stronę. Po spędzeniu dużo czasu w końcu udało mi się to zrobić. Sugeruję moją odpowiedź (jest to w pełni funkcjonalne, ponieważ również tego potrzebowałem).

najpierw dać tag li do prawidłowej nazwy id jak

<ul class="nav nav-list"> 
 
    <li id="tab1" class="active"><a href="/">Link 1</a></li> 
 
    <li id="tab2"><a href="/link2">Link 2</a></li> 
 
    <li id="tab3"><a href="/link3">Link 3</a></li> 
 
</ul>

Po tej kopii i wklej ten skrypt. od czasu napisania niektórych javascript do czytania, usuwania i tworzenia plików cookie.

$('.nav li a').click(function (e) { 
 
    
 
     var $parent = $(this).parent(); 
 
     document.cookie = eraseCookie("tab"); 
 
     document.cookie = createCookie("tab", $parent.attr('id'),0); 
 
}); 
 

 
    $().ready(function() { 
 
     var $activeTab = readCookie("tab"); 
 
     if (!$activeTab =="") { 
 
     $('#tab1').removeClass('ActiveTab'); 
 
      } 
 
     // alert($activeTab.toString()); 
 
     
 
     $('#'+$activeTab).addClass('active'); 
 
    }); 
 

 
function createCookie(name, value, days) { 
 
    if (days) { 
 
     var date = new Date(); 
 
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 
 
     var expires = "; expires=" + date.toGMTString(); 
 
    } 
 
    else var expires = ""; 
 

 
    document.cookie = name + "=" + value + expires + "; path=/"; 
 
} 
 

 
function readCookie(name) { 
 
    var nameEQ = name + "="; 
 
    var ca = document.cookie.split(';'); 
 
    for (var i = 0; i < ca.length; i++) { 
 
     var c = ca[i]; 
 
     while (c.charAt(0) == ' ') c = c.substring(1, c.length); 
 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); 
 
    } 
 
    return null; 
 
} 
 

 
function eraseCookie(name) { 
 
    createCookie(name, "", -1); 
 
}

Uwaga: Upewnij się, że implmeted w zależności od zapotrzebowania. Napisałem ten skrypt zgodnie z moją implementacją i działa mi dobrze.