不使用JS和jQuery仅用CSS能否为导航栏激活项设置颜色？

可以实现，以下是两种无JS依赖的成熟实现方案，运行性能优于JS类名切换，完全满足导航流畅运行的需求。

首先纠正你之前的样式语法错误：你书写的backgroundcolor是非法CSS属性，正确写法为background-color: green;，该问题可能导致你此前的样式部分失效。

方案1：锚点匹配方案（适配Hash路由单页应用） #

利用CSS原生:target伪类，匹配当前地址栏Hash对应的锚点元素，关联对应导航项自动赋激活样式。

示例代码 #

HTML结构

<!-- 导航与内容需放在同一父级容器下 -->
<div class="app-container">
  <!-- 页面内容区 -->
  <section id="home">首页内容</section>
  <section id="about">关于页内容</section>
  <section id="list">列表页内容</section>
  <!-- 导航栏 -->
  <nav class="nav-bar">
    <a href="#home" class="nav-item">首页</a>
    <a href="#about" class="nav-item">关于</a>
    <a href="#list" class="nav-item">列表</a>
  </nav>
</div>

CSS样式

/* 导航项默认样式 */
.nav-item {
  padding: 6px 12px;
  text-decoration: none;
  color: #333;
}
/* 匹配当前激活锚点对应的导航项 */
#home:target ~ .nav-bar a[href="#home"],
#about:target ~ .nav-bar a[href="#about"],
#list:target ~ .nav-bar a[href="#list"] {
  background-color: green;
  color: #fff;
}

如果导航栏放在内容区上方，可调整DOM顺序并修改兄弟选择器匹配规则即可。

方案2：表单控件状态方案（适配无Hash路由场景） #

利用隐藏单选框的:checked伪类，通过label关联导航项，点击导航时自动切换单选框选中状态，触发激活样式。

示例代码 #

HTML结构

<div class="app-container">
  <!-- 隐藏的单选按钮组，name一致保证互斥选中 -->
  <input type="radio" name="nav-switch" id="nav-home" checked hidden>
  <input type="radio" name="nav-switch" id="nav-about" hidden>
  <input type="radio" name="nav-switch" id="nav-list" hidden>
  
  <!-- 导航栏用label关联对应单选按钮 -->
  <nav class="nav-bar">
    <label for="nav-home" class="nav-item">首页</label>
    <label for="nav-about" class="nav-item">关于</label>
    <label for="nav-list" class="nav-item">列表</label>
  </nav>
  
  <!-- 页面内容区 -->
  <div class="page-content">
    <section class="home-section">首页内容</section>
    <section class="about-section">关于页内容</section>
    <section class="list-section">列表页内容</section>
  </div>
</div>

CSS样式

/* 导航项默认样式 */
.nav-item {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  color: #333;
}
/* 选中状态对应导航项激活样式 */
#nav-home:checked ~ .nav-bar label[for="nav-home"],
#nav-about:checked ~ .nav-bar label[for="nav-about"],
#nav-list:checked ~ .nav-bar label[for="nav-list"] {
  background-color: green;
  color: #fff;
}
/* 可同步控制对应内容区显示隐藏 */
.page-content section {
  display: none;
}
#nav-home:checked ~ .page-content .home-section,
#nav-about:checked ~ .page-content .about-section,
#nav-list:checked ~ .page-content .list-section {
  display: block;
}

如果你需要基于active类名切换激活态，原生纯CSS无法实现DOM类名的自动增减，该操作需要依赖JS完成。

内容的提问来源于stack exchange，提问作者Harikant Sharma