web-dev-qa-db-de.com

Wie kann man die aktive Klasse ändern, während auf einen anderen Link in Bootstrap-Jquery geklickt wird?

Ich habe eine HTML-Datei als Seitenleiste und verwende 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>

Ich will etwas tun:

Wenn ich einen Link wie Link 3 click ändere, wird page content in den Inhalt von Link 3 geändert, und Link 3 wird die Klasse active haben und die aktive Klasse in Link 1 entfernen.

Ich denke, dass dies in jQuery implementiert werden kann, und ich habe viele Fragen in SO gesucht, wie zum Beispiel:

Ich benutze dieses Skript:

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

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

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

Die meisten von ihnen verwenden jedoch preventDefault, dies verhindert die weitere Aktion. Daher kann der Inhalt der Seite 3 nicht geändert werden.

Wenn ich die removeDefault-Anweisung entferne, wenn die Seite den Inhalt von Link 3 lädt, kehrt die aktive Klasse zu Link 1 zurück.

Gibt es eine Möglichkeit, dieses Problem zu lösen?

7
Tanky Woo

Sie binden, Sie klicken auf das falsche Element, Sie sollten es an die a binden.

Sie verhindern, dass das Standardereignis bei li auftritt, aber li hat kein Standardverhalten. a tut dies.

Versuche dies:

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

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

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

Ich benutze die Bootstrap-Navigation

Dies hat die Arbeit für mich erledigt, einschließlich aktiver Haupt-Dropdowns und der aktiven Kinder

$(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');
    });
5
Fazil Khan

Wenn Sie die Klassen und innerhalb derselben Funktion ändern, sollten Sie in Ordnung sein.

$(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();
    });
});
2
Daniel Apt
<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

1
Milan

Ich hatte das gleiche Problem schon einmal ... probieren Sie diese Antwort hier aus, sie funktioniert auf meiner Website.

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

Quelle: Ursprünglich hier gepostet wie man aktive Klasse auf das Navigationsmenü von Twitter bootstrap setzt

0
hsusyh

Dies wird den Trick machen

 $(document).ready(function () {
        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }
    });
0
Martin Mbae

hTML-Code in meinem Fall

<ul class="navs">
   <li  id="tab1"><a href="index-2.html">home</a></li>
   <li id="tab2"><a href="about.html">about</a></li>

   <li id="tab3"><a href="project-02.html">Products</a></li>

   <li id="tab4"><a href="contact.html">contact</a></li>
 </ul>

und js code ist

  $('.navs 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);
}
0
amarjeet singh

Wenn Sie serverseitigen Code wie Java verwenden, müssen Sie den Namen der aktiven Registerkarten zurückgeben. Auf der Rückgabeseite haben Sie die Möglichkeit, alle Registerkarten mit Ausnahme der von Ihnen zurückgegebenen zu deaktivieren (dh die aktive Klasse entfernen). 

Dazu müssen Sie jeder Registerkarte eine ID oder einen Namen hinzufügen. Etwas mehr Arbeit :)

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

Dies ist, was ich mit ..__ erfunden habe. Es prüft, ob das "li" -Element die Klasse von active hat, wenn nicht, dann wird der entfernende Klassenteil weggelassen. aber hoffe das hilft. :)

0
Didiencho

Sie können Cookies verwenden, um Postback-Daten von einer Seite auf eine andere Seite zu speichern. Nachdem ich viel Zeit verbracht hatte, konnte ich dies endlich realisieren. Ich schlage Ihnen meine Antwort vor (dies funktioniert voll, da ich diese auch brauchte).

zuerst geben Sie Ihrem li-Tag einen gültigen ID-Namen wie

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

Danach kopieren und fügen Sie dieses Skript ein . Da ich ein Javascript zum Lesen, Löschen und Erstellen von Cookies geschrieben habe.

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

Hinweis: Stellen Sie sicher, dass Sie Ihren Anforderungen entsprechend implementiert haben. Ich habe dieses Skript entsprechend meiner Implementierung geschrieben und es funktioniert gut für mich.

0
Rajput