JavaScript - テンプレート継承で現在のナビゲーションを正しく強調表示するにはどうすればよいですか? (オンラインで待機中...)

上記のナビゲーションと同様に、テンプレート継承の原則を使用して、一般的なヘッダー、nav ナビゲーション、およびフッターの下部を含む Base.html ファイルを thinkphp で定義しました。他の HTML ファイルは、この Base.html テンプレートを継承します。

• 他のページにアクセスしたときに、現在のページに対応するナビゲーションを強調表示するにはどうすればよいですか?

• 上の図に示すように、ナビゲーションがマルチレベル ナビゲーションの場合、実際のページにアクセスしたときに、現在のページに対応するナビゲーションを強調表示するにはどうすればよいですか?

• メイン ナビゲーションに対応するサブ ナビゲーションにアクセスしたとき、対応するページのサブ ナビゲーションでメイン ナビゲーションを正しく強調表示するにはどうすればよいですか?

オンラインで待っています。友達全員が私の疑問を解決してくれることを願っています。

返信内容:

上記のナビゲーションと同様に、テンプレート継承の原則を使用して、一般的なヘッダー、nav ナビゲーション、およびフッターの下部を含む Base.html ファイルを thinkphp で定義しました。他の HTML ファイルは、この Base.html テンプレートを継承します。

• 他のページにアクセスしたときに、現在のページに対応するナビゲーションを強調表示するにはどうすればよいですか?

• 上の図に示すように、ナビゲーションがマルチレベル ナビゲーションの場合、実際のページにアクセスしたときに、現在のページに対応するナビゲーションを強調表示するにはどうすればよいですか?

• メイン ナビゲーションに対応するサブ ナビゲーションにアクセスしたとき、対応するページのサブ ナビゲーションでメイン ナビゲーションを正しく強調表示するにはどうすればよいですか?

オンラインで待っています。友達全員が私の疑問を解決してくれることを願っています。

これは js によって制御されているようで、作者は thinkphp でそのタグを使用して をインポートしてみてください。デフォルトではエントリ ファイルが実行されるため、機能するかどうかはわかりません。それを使う必要があります

ページをロードした後、現在のurl，是否是以header.html中的a标签的href、

の始まりを決定します

たとえば、現在のurl:xxx.com/home/xxxx => a href="xxx.com/home"，匹配后添加class activeハイライト

同じレイアウトのページに異なるページを含める必要があり、各ページに属するナビゲーションを表示する方法が分からずお困りではありませんか?

その場合は、JS の観点から、URL から開始し、URL ルールを分析して、メニューをハイライト表示できます

PHPの場合はURLかコントローラーメソッドを使用できますが、ハイライトの場合はjsかcssで実現できます

。

一般的に、覚えておく必要があるのは、さまざまなアクセス形式に従ってそれを剥がし、判断し、強調表示することです。

方法 1、js を使用して制御し、便宜上、意図的に ES6 を使用せずに、このベースを含む各ページに js を書き込むことができます。

リーリー

方法 2、php を使用します。考え方は同じで、現在リクエストされているページの URL を取得し、パスを一致させます。しかし、PHP セットを 1 年以上使用していなかったので、その書き方を忘れてしまいました。 。 。 。

個人は通常、_initialize:

リーリー リーリー

これと同様に、テンプレート内の curr_nav の値を決定します。
単純なナビゲーションであれば、モジュール、コントローラー、操作の組み合わせで直接判断できます
JSでも判断できますが、ページがちらつく感じがします

。