不同顏色

我想改變菜單按鈕的背景顏色，當我在頁面上不同顏色

這是我的代碼：

HTML

<ul> 
    <li><a class="active" href="index.php">Home</a></li> 
    <li><a href="news.php">News</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    <li><a href="about.php">About</a></li> 
</ul>

CSS

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
}

我知道我必須使用Javascript，但現在我沒有代碼來在鏈接處於活動狀態時更改類。

來源

2017-06-16 Matteo

這是一個單頁（鏈接看起來像它），還是那些通往現實生活中不同頁面的鏈接？ – Johannes

對不起，這些是指向不同頁面的鏈接，我編輯了我的答案 – Matteo

這將是更好的使用PHP。在每個頁面上添加一個變量，其中包含分配給它的頁面的名稱，例如

<?php $page = "News"; ?>

然後，您可以添加條件語句，以便將活動類添加到與您正在查看的頁面相關的導航鏈接，例如，

<ul> 
    <li><a <?php echo ($page == "Home") ? "class='active'" : ""; ?> href="index.php">Home</a></li> 
    <li><a <?php echo ($page == "News") ? "class='active'" : ""; ?> href="news.php">News</a></li> 
    <li><a <?php echo ($page == "Contact") ? "class='active'" : ""; ?> href="contact.php">Contact</a></li> 
    <li><a <?php echo ($page == "About") ? "class='active'" : ""; ?> href="about.php">About</a></li> 
</ul>

如果您不認識PHP代碼，它只是if語句的簡寫版本。

來源

2017-06-16 22:41:17 WizardCoder

-1

製作一個不同的css頁面，然後將其鏈接到該頁面，然後複製並粘貼所有內容。

來源

2017-06-16 22:12:54

我試圖使用這段代碼，但是當我在頁面上時，背景並沒有改變。如果我點擊第二個鏈接（新聞），綠色仍保留在「家」鏈接上。「活動」類不會打開「新聞」鏈接 – Matteo

回答

相關問題