导航栏活动项目颜色

Question

是否可以在不使用 JS 和 jQuery?实际上，我希望我的导航栏能正常工作。

是单页应用。
我试过了

Answer 1

您可能指的是其中之一吗？

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

或

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

Answer 2

是的，你可以不使用 JS 来做到这一点，但你需要在你的 HTML 中有一些结构才能实现它。

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

.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，因此它们仍然存在但不可见，并且通过绝对位置使它们与项目具有相同的大小和相同的位置。

导航栏活动项目颜色

Navbar active item color

css

navbar