导航栏活动项目颜色

Question

是否可以在不使用 JS 和 jQuery 的情况下为 CSS 中的导航栏的活动项赋予颜色？实际上，我希望我的导航栏运行顺畅。

1. 它是单页应用程序。
2. 我尝试了 .classname a.active(className of ){backgroundcolor: green;} 但它仅适用于 className 处于活动状态的其他保留位置。

Answer 1

是的，你可以在不使用 JS 的情况下做到这一点，但你需要在你的 HTML 中有一些结构才能使它成为可能。

例如，在这个 sn-p 中，每个 li 元素都以 radio 类型的 input 元素开头。所有 li 输入元素都被赋予相同的名称，因此它们被分组 - 这意味着当单击一个单选按钮时，它会被选中，而其他所有元素都不会被选中。使用 CSS，我们可以选择包含文本的紧随其后的元素，并更改其背景颜色或任何其他所需的样式，如果其前面的输入元素被选中。

.navbar-nav li {
  position: relative;
  display: inline-block;
}

.navbar-nav li input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

.navbar-nav li input:checked+* {
  background: yellow;
}

<ul class="navbar-nav">
  <li><input type="radio" checked name="nav"><span>Item 1</span></li>
  <li><input type="radio" name="nav"><span>Item 2</span></li>
  <li><input type="radio" name="nav"><span>Item 3</span></li>
  <li><input type="radio" name="nav"><span>Item 4</span></li>
</ul>

请注意，输入元素的不透明度为 0，因此它们仍然存在但不可见，并且通过绝对位置使它们与项目具有相同的大小和相同的位置。

Answer 2

你可能是指其中任何一个？

#nav li a:hover {
    color: red;
}

或

#nav li a:active {
    color: red;
}