2017-03-11 3 views
0

Ich habe eine Website, über 10 HTML-Seiten, alle haben das gleiche Menü, so etwas wieWie blende ich einen Menüeintrag automatisch auf allen Seiten aus?

<ul class="nav-menu"> 
        <li><a href="page1.html">Page1</a></li> 
        <li><a href="page2.html">Page2</a></li> 
        <li><a href="page3.html">Page3</a></li> 
        <li><a href="page4.html">Page4</a></li> 
       </ul> 

und so weiter.

Nun ist eine der Seiten eine Ereignisseite. Wenn keine Ereignisse vorhanden sind, möchte ich sie ausblenden. würde ich den Stil-

<li style="display:none;"><a href="page1.html">Page1</a></li> 

ich diesen Stil in einem Ort nur Attribut hinzufügen möchten verwenden oder entfernen, aber es sollte automatisch auf den anderen Seiten ändern, also muss ich es nicht tun manuell für alle 10 Seiten (und Unterseiten)

Ist das möglich? Jeder Rat ist willkommen! :) Danke!

Antwort

0

wenn Sie Seite jedes Mal neu geladen wird, die Sie die Seite wechseln, können Sie diese verwenden:

window.onload = function() { 
 
    var url = window.location.href; 
 
    var parts = url.split('/'); 
 
    var page = parts[parts.length - 1]; 
 
    
 
    switch(page){ 
 
    case 'page1.html': 
 
     document.getElementById('p1').style.display = 'none'; 
 
     break; 
 
    case 'page2.html': 
 
     document.getElementById('p2').style.display = 'none'; 
 
     break; 
 
    case 'page3.html': 
 
     document.getElementById('p3').style.display = 'none'; 
 
     break; 
 
    case 'page4.html': 
 
     document.getElementById('p4').style.display = 'none'; 
 
     break; 
 
    } 
 
}
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="Here js file route"></script> 
 
    </head> 
 
    <body> 
 
    <ul class="nav-menu"> 
 
     <li id="p1"><a href="page1.html">Page1</a></li> 
 
     <li id="p2"><a href="page2.html">Page2</a></li> 
 
     <li id="p3"><a href="page3.html">Page3</a></li> 
 
     <li id="p4"><a href="page4.html">Page4</a></li> 
 
    </ul> 
 
    </body> 
 
</html>

+0

Hallo! Ich bin neu im Webdesign. Also, erstelle ich eine JavaScript-Datei mit dem Skript, das Sie mir gegeben haben? und fügen Sie in der HTML Abschnitt ? Also bearbeite ich myjava nur jedes Mal, wenn ich einen Menüeintrag ein-/ausblenden muss. Funktioniert es so? –

+0

Ja, Sie können es so machen. Ich aktualisierte den Code und fügte window.onload function hinzu – Daniel

Verwandte Themen