实现点击导航栏激活项加粗、修改字体颜色的交互效果

当前导航激活态样式失效、点击后文字变蓝、激活项无法正常切换，由3个问题导致：

• CSS选择器匹配错误：文字实际包裹在<a class="nav-link">标签内，给父级li标签设置的颜色、字重样式无法继承覆盖a标签的浏览器默认样式、Bootstrap默认链接样式，因此激活态样式不生效，点击后还会触发浏览器默认的蓝色链接样式
• CSS属性书写错误：.nav-link的padding值写为0.5 rem，数值和单位之间多余空格，属于无效属性值
• 点击事件未阻止a标签默认行为：点击a标签时会触发默认的锚点跳转/访问态样式逻辑，干扰激活态切换

修正后的CSS #

.navbar {
  background: #FEFFFF !important;
}

.nav-link {
  color: #000;
  font-weight: normal;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* 激活态样式直接作用于导航链接，覆盖默认样式 */
.nav-item.active .nav-link {
  color: #4ba67f;
  font-weight: bold;
}

.navbar-nav .nav-item:hover .nav-link {
  color: #4ba67f;
}

修正后的JS #

$(document).ready(function() {
  $("ul.navbar-nav > li").click(function(e) {
    // 阻止a标签默认跳转行为，避免触发默认链接样式
    e.preventDefault();
    $("ul.navbar-nav > li").removeClass("active");
    $(this).addClass("active");
  });
});

原有HTML结构无需调整，替换上述CSS和JS代码即可实现预期效果：点击导航项时，当前项变为粗体、青绿色，其余项保持黑色常规字重，激活态可正常切换。

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