Heim  >  Artikel  >  Backend-Entwicklung  >  javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?

javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?

WBOY
WBOYOriginal
2016-10-17 09:30:161499Durchsuche

javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?
javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?
Bei einer Website-Navigation wie oben wird die Beschriftung hervorgehoben, wenn ich auf den Link klicke, und wenn ich auf andere Seiten klicke, springt sie zur entsprechenden Seite Seite und das Navigations-Tag, das der aktuellen Seite entspricht, werden ebenfalls hervorgehoben. Wie sieht Ihr allgemeiner Designplan aus? Was ist eine gute, elegante Lösung? Bitten Sie um Antworten.
Die Lösung, an die ich persönlich gedacht habe, ist:
1. Durchlaufen Sie die URLs dieser Tags, wenn sie mit der Webseiten-URL der aktuellen Seite übereinstimmen.
2 Cookies, um den aktuell angeklickten Navigationsindex zu speichern, lesen Sie dann den Indexwert, nachdem Sie die aktuelle Seite aufgerufen haben, und markieren Sie die durch den Indexwert markierte Beschriftung

Ich finde diese beiden Methoden etwas unzuverlässig und suche nach einer besseren Idee.

Antwortinhalt:

javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?
javascript - Wie hebt man die Navigationslinks der aktuellen Seite richtig hervor?Bei einer Website-Navigation wie oben wird die Beschriftung hervorgehoben, wenn ich auf den Link klicke, und wenn ich auf andere Seiten klicke, springt sie zur entsprechenden Seite Seite und das Navigations-Tag, das der aktuellen Seite entspricht, werden ebenfalls hervorgehoben. Wie sieht Ihr allgemeiner Designplan aus? Was ist eine gute, elegante Lösung? Bitten Sie um Antworten.
Die Lösung, an die ich persönlich gedacht habe, ist:
1. Durchlaufen Sie die URLs dieser Tags, wenn sie mit der Webseiten-URL der aktuellen Seite übereinstimmen.
2 Cookies, um den aktuell angeklickten Navigationsindex zu speichern, lesen Sie dann den Indexwert, nachdem Sie die aktuelle Seite aufgerufen haben, und markieren Sie die durch den Indexwert markierte Beschriftung
Ich finde diese beiden Methoden etwas unzuverlässig und suche nach einer besseren Idee.

JavaScript

Kann anhand der

-Eigenschaft des a-Elements beurteilt werden, die mit der Seiten-URL übereinstimmt

hrefSie können jedem Element auch ein benutzerdefiniertes Datenattribut hinzufügen, z. B.

, und einen regulären Abgleich darin einfügen

JSFiddle: https://jsfiddle.net/bd4g5f2h/data-pattern

Ich glaube nicht, dass das notwendig ist. Es gibt nur drei oder fünf Webseiten. Sie erstellen eine hervorgehobene Klasse. Dann legen Sie einfach eine hervorgehobene Navigation für jede Seite fest. Wenn Sie eine Template-Engine verwenden. Dieser Schritt kann mithilfe einer Template-Engine durchgeführt werden. Wenn Sie eine einseitige Anwendung verwenden, sollten Sie in diesem Fall nur die Verwendung von js in Betracht ziehen oder die Sache nach #

beurteilen

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn