javascript - Wie kann ich die aktuelle Navigation bei der Vorlagenvererbung korrekt hervorheben? (Warten online...)

Ähnlich wie bei der obigen Navigation habe ich das Prinzip der Vorlagenvererbung verwendet, um eine base.html-Datei in thinkphp zu definieren, die die allgemeine Kopfzeile, die Navigationsnavigation , die Fußzeile unten usw. enthält. Die HTML-Datei wird Erben Sie die Vorlage base.html.

• Wie kann ich beim Besuch anderer Seiten die der aktuellen Seite entsprechende Navigation hervorheben?

• Wie oben gezeigt, wenn ich die eigentliche Seite besuche, wie kann ich die Navigation entsprechend der aktuellen Seite hervorheben, wenn es sich bei der Navigation um eine mehrstufige Navigation handelt?

• Wie kann ich die Hauptnavigation in der Unternavigation der entsprechenden Seite richtig hervorheben, wenn ich auf die Unternavigation zugreife, die der Hauptnavigation entspricht?

Ich warte online und hoffe, dass Freunde mir ein paar Hinweise geben können.

Antwortinhalt:

Ähnlich wie bei der obigen Navigation habe ich das Prinzip der Vorlagenvererbung verwendet, um eine base.html-Datei in thinkphp zu definieren, die die allgemeine Kopfzeile, die Navigationsnavigation , die Fußzeile unten usw. enthält. Die HTML-Datei wird Erben Sie die Vorlage base.html.

• Wie kann ich beim Besuch anderer Seiten die der aktuellen Seite entsprechende Navigation hervorheben?

• Wie oben gezeigt, wenn ich die eigentliche Seite besuche, wie kann ich die Navigation entsprechend der aktuellen Seite hervorheben, wenn es sich bei der Navigation um eine mehrstufige Navigation handelt?

• Wie kann ich die Hauptnavigation in der Unternavigation der entsprechenden Seite richtig hervorheben, wenn ich auf die Unternavigation zugreife, die der Hauptnavigation entspricht?

Ich warte online und hoffe, dass Freunde mir ein paar Hinweise geben können.

Dies scheint von js gesteuert zu werden, und der Autor hat auch sein Tag in thinkphp verwendet, . Ich weiß nicht, ob es funktioniert, da es standardmäßig ist Um die Eintragsdatei auszuführen und einzubinden, muss ich sie unbedingt verwenden

Bestimmen Sie nach dem Laden der Seite, ob das aktuelle url mit dem header.html des a-Tags in href,

Zum Beispiel das aktuelle url:xxx.com/home/xxxx => a href="xxx.com/home", fügen Sie nach dem Abgleich eine class active Hervorhebung

Sie sind sicher beunruhigt, weil die gleiche Layoutseite verschiedene Seiten enthalten muss und Sie nicht wissen, wie Sie die Navigation, zu der sie gehört, für jede Seite anzeigen sollen?

Wenn ja, dann können Sie in Bezug auf js mit der URL beginnen, die URL-Regeln analysieren und dann das Menü hervorheben

Für PHP können URL- oder Controller-Methoden verwendet werden. Zur Hervorhebung kann dies auch mit js oder css erreicht werden

Methode 1 kann mit js gesteuert werden. Schreiben Sie js in jede Seite, die diese Basis enthält. ES6 wird nicht speziell für Ihre Bequemlichkeit verwendet.

<code>var nav = Array.prototype.slice.call(document.querySelectorAll('#nav a'));
var currentPath = location.pathname;
nav.forEach(function(a) {
    if(a.pathname === currentPath) a.classList.add('active');
});</code>

Einzelpersonen befinden sich normalerweise in _initialize:

<code>$this->assign("cur_nav","home");</code>

<code><li <eq name="cur_nav" value="company">class="active"</eq> ><a href="{:U('/clist')}">装修公司</a></li>
<li <eq name="cur_nav" value="demand">class="active"</eq> ><a href="{:U('/dlist')}">装修招标</a></li></code>

Wenn die Navigation einfach ist, können Sie direkt anhand der Kombination von Modulen, Controllern und Vorgängen beurteilen
JS kann auch beurteilen, aber es fühlt sich an, als würde die Seite unangenehm flackern!