Question

我是网站设计的初学者，并且正在使用this教程来设计导航栏。我有两个文件index.html和styles.css。我采用的方法与本教程略有不同（我有两个单独的文件而不是一个）。内容如下

.toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}

.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}

.toplist ul li a .active{
background-color: #4CAF50;
color: white;
}

.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}

.toplist ul li a:hover {
background-color: #555;
color: white;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Main Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="toplist">
        <ul>
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>

</body>

</html>

但是，应该以绿色显示活动页面的部分无法正常工作。谁能指出出什么问题了？

Answer 1

您必须将“活动”类添加到与您当前正在编辑的页面相对应的导航项中。您可以在他们的示例中看到：https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_active

在您的情况下，您想这样添加它：

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

Answer 2

已更改

.toplist ul li a.active{
background-color: #4CAF50;
color: white;
} 
and 
<li><a class="active" href="default.asp">Home</a></li>

.toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}

.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}

.toplist ul li a.active{
background-color: #4CAF50;
color: white;
}

.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}

.toplist ul li a:hover {
background-color: #555;
color: white;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Main Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="toplist">
        <ul>
            <li><a class="active" href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>

</body>

</html>

Answer 3

只需为家庭添加class =“ active”，即可使用。

Answer 4

您的大多数代码都已设置。您要做的只是稍微更新一下样式，以将绿色应用于活动链接（.toplist ul li a.active而不是.toplist ul li a .active），并添加某种机制将活动类添加到当前活动链接。

下面是如何使用Javascript的示例。但是，如果从服务器中添加活动类，那就更好了。

var links = document.querySelectorAll('.toplist ul li a');
links.forEach(function (element) {
  element.addEventListener('click', function (e) {
    // PreventDefault to prevent redirect
    e.preventDefault();
    links.forEach(function (element) {
      element.classList.remove('active');
    });
    this.classList.add('active');
  });
});

.toplist ul{
list-style-type: none;
padding: 0;
margin: 0;
width: 200px;
background-color: #f1f1ff;
}

.toplist ul li a{
display: block;
padding: 8px 16px;
color: #000;
text-decoration: none;
}

.toplist ul li a.active{
background-color: #4CAF50;
color: white;
}

.toplist ul li a:hover:not(.active) {
background-color: #555;
color: white;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Main Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="toplist">
        <ul>
            <li><a href="default.asp">Home</a></li>
            <li><a href="news.asp">News</a></li>
            <li><a href="contact.asp">Contact</a></li>
            <li><a href="about.asp">About</a></li>
        </ul>
    </div>

</body>

</html>

请注意，我也删除了

.toplist ul li a:hover {
background-color: #555;
color: white;
}

不需要的样式。

HTML和CSS：在无序列表中显示活动项目

4 个答案: