不同颜色

我想改变菜单按钮的背景颜色，当我在页面上不同颜色

这是我的代码：

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

回答

相关问题