CSS：如何更改活動導航頁面菜單的顏色

我試圖更改用戶在我的網站上選擇的活動或當前頁面導航鏈接的顏色。我究竟做錯了什麼？謝謝。CSS：如何更改活動導航頁面菜單的顏色

到目前爲止，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;}

並採用包括PHP函數我的HTML呼籲導航菜單頁面模板：

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

來源

2012-07-08 Steven

我覺得你越來越感到困惑的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。

來源

2012-07-08 11:20:13 James

非常感謝您的快速響應！工作就像一個魅力:) – Steven 2012-07-08 11:39:04

嗨@詹姆斯你的意思是「你將需要更新您的模板頁面採取selectedPage參數。」 – Pan 2015-11-23 14:57:44

添加ID current活動/當前頁面：

<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-08 11:15:27

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-08 11:18:42

CSS：如何更改活動導航頁面菜單的顏色

回答

相關問題