CSS：アクティブなナビゲーションページメニューの色を変更する方法

Question

私のウェブサイトでユーザーが選択したアクティブまたは現在のページナビゲーションリンクの色を変更しようとしています。私は間違って何をしていますか？ありがとう。

これまでのところ、CSSは次のようになります。

div.menuBar 
{ 
    font-family: BirchStd; 
    font-size: 40px; 
    line-height: 40px; 
    font-weight: bold; 
    text-align: center; 
    letter-spacing: -0.1em; 
} 

div.menuBar li{list-style:none; display: inline;} 
div.menuBar li a:active{color:#FF0000;} 
div.menuBar ul{margin:0;} 

そして、私のHTMLには、PHPの関数使用してナビゲーションメニューのためのページテンプレートを呼び出します：ID currentを追加

<div class="menuBar"> 
    <ul> 
    <li><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

Answer 1

私はあなたがa:active CSSセレクタが何をするかについて混乱してきていると思います。クリックするとリンクの色が変わります（クリックしている間、つまりマウスボタンが押されている時間だけ）。あなたがする必要があるのは、新しいクラスを導入することです。 .selectedをCSSに追加します。リンクを選択すると、選択したメニュー項目を新しいクラスに更新します。

<div class="menuBar"> 
    <ul> 
     <li class="selected"><a href="index.php">HOME</a></li> 
     <li><a href="two.php">PORTFOLIO</a></li> 
     .... 
    </ul> 
</div> 

// specific CSS for your menu 
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS 
li.selected a { color: #FF0000; } 

あなたはselectedPageパラメータに取るようにあなたのテンプレートページを更新する必要があります。

Answer 2

をアクティブ/現在のページ：

<div class="menuBar"> 
    <ul> 
    <li id="current"><a href="index.php">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul> 

#current a { color: #ff0000; } 

Answer 3

CSS :activeは、クリックされたリンクのアクティブな状態を意味します。クリックした瞬間であり、マウスのボタンはまだ放されていません。どのページにいるかわからず、メニュー項目にスタイルを適用できません。あなたがクラスを作成し、現在のページのメニューに手動で追加する必要があなたの問題を解決するために

：

a.active { color: #f00 } 

<ul> 
    <li><a href="index.php" class="active">HOME</a></li> 
    <li><a href="two.php">PORTFOLIO</a></li> 
    <li><a href="three.php">ABOUT</a></li> 
    <li><a href="four.php">CONTACT</a></li> 
    <li><a href="five.php">SHOP</a></li> 
</ul>