Verwenden von Javascript zur Verwaltung der Navigationsleiste

Ich habe eine Webseite mit 3 Elementen in der Navigationsleiste; Produkte, Partner und Support. Ich habe diese Navigationsleiste in eine separate HTML-Datei verschoben. navbar.html und nannte es mit load-navbar.js. Ich habe dies getan, um Code-Wiederholungen zu vermeiden. Ist es möglich, Javascript zu verwenden, um anzuzeigen, welches Navigationselement aktiv ist? Ist es möglich, hierzu switch-Anweisungen zu verwenden? Wenn ja, wie kann ich das tun?Verwenden von Javascript zur Verwaltung der Navigationsleiste

navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a> 
    </div> 
    <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing"> 
     <ul class="nav navbar-nav navbar-right" > 
      <li><a class="mc-active" href="Items/products.html">Products</a></li> 
      <li><a href="partners.html">Partners</a></li> 
      <li><a href="support.html">Support</a></li> 
     </ul> 
    </div> 
</nav>

Last navbar.js

$(function(){ 
    $("#main-nav").load("main-nav.html"); 
});

Die mc-aktive Klasse in Produkte der Klasse hinzugefügt wird, dass Produkte zu zeigen, .html ist die aktive Klasse.

Quelle

2016-05-24 Michelle Ashwini

Kurze Antwort: Ja, es ist möglich, Javascript zu verwenden, um den aktiven Link zu markieren. Warum jedoch Javascript verwenden, um etwas über AJAX zu laden? – Jhecht

@Jhecht Ich bin relativ neu in der Webentwicklung und habe nur ein wenig Verständnis für Javascript. Ich verstehe nicht, was Sie meinen, wenn Sie etwas über AJAX laden? –

der '$ ('# main-nav'). Load()' Aufruf ist, was gemeinhin als AJAX bezeichnet wird. Es bedeutet asynchrone Javascript und XML. Navigationsleisten sind wirklich wichtig und es sei denn, Sie haben einen sehr spezifischen Grund, die Leiste aus Ihrer Header-Vorlage herauszuhalten, ich würde empfehlen, sie zurückzusetzen. – Jhecht

Sie können die aktuelle URL in einer Variablen speichern:

var x = $(location).attr('href');

Und dann eine „aktive“ Klasse einen Link zuweisen, wenn die href die URL übereinstimmt, oder wenn es href ist innerhalb der URL enthalten, je nachdem, welche passt zu Ihrer Situation. Sie können diesen Link verwenden:

css-tricks link

oder diese Suche:

jquery active link google

für weitere Informationen, die Ihre Situation besser passen könnte. Ich glaube nicht, dass du mehr als einen einfachen Vergleich zwischen dem Fenster href und link href brauchst. Auch ich würde auf jeden Fall den Ratschlägen in den Kommentaren folgen.

Quelle

2016-05-24 04:35:29

Ich habe versucht $ (function() { $ ("# main-nav"). Load ("main-nav.html ", function() { $ ('nav a [href^=" /' + Standort.Pfadname.split ("/") [1] + '"]'). addClass ('mc-active'); }); }); Das Problem, das ich habe, ist die Navbar verschwindet, wenn ich den Link zu einer anderen Seite in der Navigationsleiste klicken –

Vielleicht versuchen Sie eine einfachere Funktion: $ ("nav li"). Je (function() { var x = $ (Speicherort) .attr ("href"); var y = this.children ("ein"). attr ("href"); if (x.IndexOf (y)! = -1) {this. addClass ("active")};}); –

Sorry, wenn das nicht simpl scheint. Es ist nur, zu überprüfen, ob die Zeichenfolge des Link href in der URL enthalten ist. Wenn es ist, fügt die Klasse "aktiv" hinzu ". Bis zu Ihnen, um die aktive Klasse zu stylen. –

Verwenden von Javascript zur Verwaltung der Navigationsleiste

Antwort

Verwandte Themen