13

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

これまでのところ、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関数を使用してナビゲーションメニューのページテンプレートを呼び出します。

<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>

4

3 に答える 3

5

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>
于 2012-07-08T11:18:42.270 に答える
3

currentアクティブ/現在のページのID を追加:

<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; }
于 2012-07-08T11:15:27.203 に答える