HTML インクルードによる共通化されたヘッダー部分で今いるページを視覚的にわかりやすくしたい

Question

HTMLで共通化したヘッダーにおいて、
今いるページがどこなのか、視覚的にわかりやすくなるように設定したいです。

今回ヘッダーを共通化したいのですが、
ヘッダー部にあるメニュー一覧で、
表示しているメニューにのみCSSのクラスをつけて、メニューに表示されている字を太くしています。
今いるページがわかりやすいようにするためなのですが、
これだけのために、共通化できないでいます。

JavaScriptを使えば解決できると聞いたのですが、
調べても、解決法に辿り着けず、
途方にくれています。

どなたか解決法を教えていただけませんでしょうか

Comments

[hatena19]

HTML インクルードの方法はいろいろありますが、どのような方法をつかってますか。

Answer 1

ヘッダー部にあるメニュー一覧で、

表示しているメニューにのみCSSのクラスをつけて、メニューに表示されている字を太くしています。
今いるページがわかりやすいようにするためなのです

HTML+CSSで実現しているなら、classList を活用して動的に変更すれば対応できるはずです。

古典的な手法として、パンくずリストを動的に差し込む手法もあります。

いずれも 共通の JavaScript でページ表示後にHTMLを動的変更する形になると思います。
pageShow イベントで適用すると、SPAにも対応できるのではないでしょうか。