jQuery Click-Ereignis, nachdem neue Seite geladen

Question

ich ein Webprojekt mit Node/Express/Lenker habe

ich eine klebrige Navigation auf der Seite habe, die teilweise durch einen handel gemacht wird.

Wenn ein Link angeklickt wird und die Seite geladen wird, möchte ich den aktiven Status zu dem Element ändern, auf das geklickt wurde. Ich habe sowohl .click() als auch .on('click', child, callback) ausprobiert. Es funktioniert, wenn ich darauf klicke, aber es wird zurückgesetzt, nachdem das DOM neu geladen wurde.

Vielen Dank für Ihre Hilfe Stackoverflow.

Hier ist meine jQuery:

//NAVIGATION ACTIVES 
$('.stickynav').on('click', '.platform-nav', 
    function() { 
    $('.main-hand').removeClass("nav-active"); 
    $('.sticky-hand').removeClass("nav-active"); 
    $(this).addClass("nav-active"); 

    }); 
$('.stickynav').on('click', '.tools-nav', 
    function() { 
    $('.main-hand').removeClass("nav-active"); 
    $('.sticky-hand').removeClass("nav-active"); 
    $(this).addClass("nav-active"); 
    }); 
$('.stickynav').on('click', '.diensten-nav', 
    function() { 
    $('.main-hand').removeClass("nav-active"); 
    $('.sticky-hand').removeClass("nav-active"); 
    $(this).addClass("nav-active"); 
    }); 
$('.stickynav').on('click', '.blog-nav', 
    function() { 
    $('.main-hand').removeClass("nav-active"); 
    $('.sticky-hand').removeClass("nav-active"); 
    $(this).addClass("nav-active"); 
    }); 

und HTML (.hbs):

<div class="stickynav" data-spy="affix"> 
    <div class="hands-connector"> 
     <img src='/img/connector-sticky.png' /> 
    </div> 


<div class="hands-sticky"> 
    <div class="sticky-hand platform-nav nav-active" id="platform-sticky"> 
    <a href="/">  <img src="/img/platform-sticky.png" alt="Naar kennisplatform" /> 
      <p>Kennisplatform</p></a> 

    </div> 
    <div class="sticky-hand tools-nav" id="tools-sticky"> 
    <a href="/tools"> 
     <img src="/img/tools-sticky.png" alt="Naar gratis tools" /> 
     <p> 
      Tools 
     </p> 
     </a> 
    </div> 
    <div class="sticky-hand diensten-nav" id="diensten-sticky"> 
    <a href="/diensten"> 
     <img src="/img/diensten-sticky.png" alt="Naar diensten" /> 
     <p> 
      Diensten 
     </p> 
    </a> 
    </div> 
    <div class="sticky-hand blog-nav" id="blog-sticky"> 
    <a href="/blog?page=1"> 
     <img src="/img/blog-sticky.png" alt="Naar blog" /> 
     <p> 
     Blog 
     </p> 
    </a> 
    </div> 
</div> 
</div> 

und die CSS-Klasse als Referenz (deaktiviert den Link):

.nav-active { 
    text-decoration:none; 
    color:black; 
    -webkit-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue); 
    -ms-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue); 
    filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue); 
    pointer-events:none; 
    cursor:default; 
} 

Answer 1

I‘ Ich bin mir nicht sicher, ob das, was Sie versuchen zu tun, möglich ist oder nicht.

Wenn die Seite neu geladen wird, verlieren Sie jeden Status, der nicht irgendwie gesichert wurde. Sie benötigen also eine Art von Datenquelle oder Sitzung.

Wenn Sie die Seite nicht benötigen, um neu zu laden, können Sie "false zurückgeben"; Am Ende Ihrer Klick-Funktionen sollte dies verhindern, dass die Seite neu geladen wird und Sie die gewünschten Klassenänderungen erhalten.

wenn Ihr Click-Ereignis die Route ändert, würde ich einen Skript empfehlen, läuft nach dem Laden der Seite abgeschlossen ist (auf Dokument bereit)

$(function() { your code here }) 

, das die aktuelle Route überprüft und setzt die CSS-Klassen gibt basierend auf der Route. (Statt auf das, was geklickt wurde, da Sie diese Informationen auf einer Seite zu laden verlieren werde, aber Sie werden immer noch die Strecke haben.)

location.href 

Answer 2

HTTP is stateless.

Jedes Mal, wenn eine Seite aktualisiert wird, ist ihr Status verloren und Ihre Seite weiß nicht, wo sie war. Also müssen Sie herausfinden, wie Sie den Status auf Ihren Seiten beibehalten können.

Beispielsweise können Sie this API des Browsers verwenden, um den Status im lokalen Speicher beizubehalten. Lokaler Speicher ist für einen Hostnamen persistent. Wenn Sie also auf einen Link klicken, können Sie seine Details im lokalen Speicher speichern. Wenn Ihr DOM wieder bereit ist, können Sie den gleichen Wert aus dem lokalen Speicher lesen und diesen Link aktivieren.

Weitere Möglichkeiten finden Sie in this discussion.

Answer 3

Sie können es nicht so machen, denn wenn die Seite neu geladen wird, ist es eine komplett neue HTTP-Anfrage und sie verliert die letzte, die auf der vorherigen Seite ausgeführt wurde.was Sie tun, auf die URL basiert können Sie die class = „nav-aktiv“ mit Server-Side-Scripting so etwas wie Sie können, sagen Sie mit PHP dann versuchen

Einstellung $ page = „Plattform“

einstellen

und beim Schreiben von HTML können Sie hinzufügen

<div class="sticky-hand tools-nav" id="tools-sticky" class="<?php ($page=='tools')?"active":"" ?>" > 
<div class="sticky-hand platform-nav" id="tools-sticky" class="<?php ($page=='platform')?"active":"" ?>" >