html - 現在のページに応じてナビゲーションバーのハイパーリンクの色を変更する方法は?

Question

この例では、navbar に次の要素が含まれているとします。

cats - dogs - sheep - cows

catsページにいる場合はテキストcatsは赤ですが、残りは白のまま、dogsページにいる場合dogsは青などになるようにしたいですか？

Answer 1

クラスを作成し (たとえば.active)、それを各ページのアクティブなタグに割り当てます (cats タグは、cats ページのアクティブなクラスを取得します)。コードは次のようになります。

HTML

<a class="active">cats</a>
<a href="dogs.html">dogs</a>
<a href="sheep.html">sheep</a>
<a href="cows.html">cows</a>

CSS

a {
    color: white;
}

a.active {
    color: red;
}

編集: アクティブなページごとに異なる色を使用する場合は、インライン CSS を使用することもできます。

<a style="color:red">cats</a>
<a href="dogs.html">dogs</a>
<a href="sheep.html">sheep</a>
<a href="cows.html">cows</a>