HTML左侧导航点击时如何实现整个选项区块背景色修改

核心原因 #

你当前将active状态类加在<a>标签上，但<li>设置了padding: 33px的内边距，<a>仅覆盖<li>内部的内容区域，因此背景色只会作用在文字所在范围，无法覆盖整个导航选项区块。同时你的JS代码存在选择器错误：HTML中wrapper是类名，你用了ID选择器$('#wrapper')，会导致事件绑定失效。

推荐方案（修改状态类挂载位置，逻辑更清晰） #

1. 修改JS代码 #

将active类挂载到<li>父容器上，直接控制整个区块的样式：

$('.wrapper').on('click', 'a', function(e) {
    e.preventDefault();
    // 移除所有已有active状态
    $(this).closest('.wrapper').find('li.active').removeClass('active');
    // 给当前点击项的父li加active
    $(this).parent('li').addClass('active');
    // 原有标签页显示逻辑保留
    // $(activeTab).show();
});

2. 修改对应CSS样式 #

调整active的选择器，以及优化重复的hover样式：

/* 新增li的active样式，控制整个区块背景 */
.wrapper ul li.active {
  background-color: #0f5f8d;
}
.wrapper ul li.active a {
  color: #fff;
}
/* 可删除原来的.wrapper ul li a.active样式，以及重复的li:hover样式 */

修改完成后点击导航项，整个<li>区块都会触发背景色变化，和hover效果表现一致。

备选方案（调整padding位置，让a标签撑满li） #

如果你不想改JS逻辑，也可以把<li>的padding转移到<a>标签上，让<a>占满整个<li>区域，原有active加在<a>上的样式就可以覆盖整个区块：

/* 去掉li的padding */
.wrapper ul li {
  box-align: center;
  text-align: center;
  font-size: 10px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

/* 给a加padding，撑满整个li */
.wrapper ul li a {
  color: #bdb8d7;
  display: block;
  padding: 33px;
  text-decoration: none;
}

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