Umschalten der aktiven-Klasse in der nav bar JQuery

<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

So, ich wollte zu binden click jede dieser Id ' s, und legen Sie class="active" auf der einen, auf die geklickt wurde, und entfernen Sie es von allen anderen.

Ich den ersten Teil, aber wie kann ich letzteres tun?

InformationsquelleAutor slandau | 2011-06-23
  1. 33
    $(function() {
   $("li").click(function() {
      //remove classes from all
      $("li").removeClass("active");
      //add class to the one we clicked
      $(this).addClass("active");
   });
});

    Wäre es klug, zu geben, sinnvolle Klassen zu <li>'s so können Sie richtig wählen Sie nur diese, aber Sie bekommen die Idee.

    InformationsquelleAutor Björn
  2. 9

    Keine Notwendigkeit zu binden, eine click-Ereignis für jede ID, aber stattdessen binden Sie auf alle Objekte in der Liste dieser ungeordneten Liste. Verwenden Sie dann die .parent().children () - Methoden. Folgendes sollte funktionieren:

    $('ul li').click(function(){
  $(this).addClass('active');
  $(this).parent().children('li').not(this).removeClass('active');
});
    • 7 Jahre später Kommentar, aber : $(this).addClass('active').siblings().removeClass('active')
    • haha.... musste gesagt werden 🙂
    InformationsquelleAutor Marlin
  3. 3

    Finden Sie wahrscheinlich besser (sonst wird die Seite zu springen) - 

    $(function() {
$("li").click(function() {
  //remove classes from all
  $("li").removeClass("active");
  //add class to the one we clicked
  $(this).addClass("active");
  //stop the page from jumping to the top
  return false;
});
});
    • Wenn Sie verhindern möchten, dass die Seite springen, sollten Sie einfach preventDefault() für das Ereignis aus. False zurückgeben, können unerwünschte Nebenwirkungen, wie etwa die Verhinderung zukünftiger event-propagation. $("li").click(function(e) { e.preventDefault(); });
    InformationsquelleAutor Phil Carr
  4. 1

    Können Sie tun:

    $('li').click(function(e){
    e.preventDefault();
   $(this).addClass('active');
    $(this).siblings().each(function(){
        $(this).removeClass('active') ;

    });
});

    fiddle hier http://jsfiddle.net/UVyKe/1/

    • 7 Jahre später Kommentar, aber : $(this).addClass('active').siblings().removeClass('active')
    InformationsquelleAutor Nicola Peluchetti
  5. 0

    Geben dem ul eine id oder eine Klasse, und wählen Sie aus der es. 

    <ul id = "nav">...

var $navItems = $('#nav > li');
$navItems.click(function(){
    $navItems.removeClass('active');
    $(this).addClass('active');
});
    InformationsquelleAutor Stefan Kendall
  6. 0
    $("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});
    InformationsquelleAutor Itai Sagi
  7. -1

    Sie können active-Klasse mit unten einzige Zeile ohne Ereignis

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

    link zu verweisen

    InformationsquelleAutor Manthan Vaghani
Schreibe einen Kommentar