Question

我在设置导航栏处于活动状态时遇到问题。我想要在活动时更改背景颜色。

我在下面添加了一个代码段：

nav {
  font-size: 30px;
  color: #ffffff;
}
ul {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
}
li {
  float: left;
}
nav li a {
  display: block;
  padding-top: 38.5px;
  padding-bottom: 38.5px;
  padding-left: 21px;
  padding-right: 21px;
  background-color: #000000;
  text-decoration: none;
  color: #3a9eb2;
  font-size: 20px;
}
nav li a:hover {
  background-color: #3a9eb2;
  opacity: 0.7;
  color: #000000;
}
/* problem*/

nav li a:active {
  background-color: #ffffff;
}

<nav>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#">RT SERIES</a>
    </li>
    <li><a href="#">ATV NR6</a>
    </li>
    <li><a href="#">ABOUT US</a>
    </li>
  </ul>
</nav>

但是当我运行网页时，活动链接不会改变颜色，任何人都可以帮助

Answer 1

当您实际单击元素时，将应用元素的:active状态。对于这种情况，您的代码工作正常。有关:active on MDN的更多信息。

如果您的意思是当前页面处于活动状态，则需要通过Javascript或PHP应用其他课程。

＆＃13;

nav {
  font-size: 30px;
  color: #ffffff;
}
ul {
  list-style-type: none;
  padding: 0px;
  overflow: hidden;
}
li {
  float: left;
}
nav li a {
  display: block;
  padding-top: 38.5px;
  padding-bottom: 38.5px;
  padding-left: 21px;
  padding-right: 21px;
  background-color: #000000;
  text-decoration: none;
  color: #3a9eb2;
  font-size: 20px;
}
nav li a:hover {
  background-color: #3a9eb2;
  opacity: 0.7;
  color: #000000;
}

/* problem*/
nav li a:active {
  background-color: #ffffff;
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.htm">HOME</a>
    </li>
    <li><a href="#">RT SERIES</a>
    </li>
    <li><a href="#">ATV NR6</a>
    </li>
    <li><a href="#">ABOUT US</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

a:active表示状态，而调用新页面，即从您点击链接到新页面开始加载的那一刻。通常这很短，所以你几乎看不到那种状态。

“活动链接”通常表示：当前页面的菜单项/链接，通过javascript被分配一个类似“活动”的类，因此这将是<a href="pages/start.php" class="active">Start</a>

另外：在你的情况下，除了第一个链接之外的所有链接都指向同一页面上的本地锚点/ ID，因此在这种情况下，如前所述的简单javascript将不起作用。

所以我知道，这不是解决你的问题的方法，但它可以解释为什么它不会像你所期望的那样起作用。

HTML导航栏问题（活动状态）

2 个答案: