网站菜单激活链接无法高亮问题求助

你的代码里有两个关键问题导致激活状态不生效：

• JS里的removeClass()会清空a标签的所有类，连基础样式的类都删掉了，导致激活样式无法正常叠加
• 没有设置初始激活项，页面加载时没有默认高亮的菜单

修改后的完整代码 #

HTML（给默认首页加上active类）

<div class="topnav">
  <div class="topnav-centered">
    <a href="#" class="active">Home</a>
    <a href="#">Us</a>
    <a href="#">Contact</a>
  </div>
</div>

CSS（样式无需改动）

.topnav a {
  float: left;
    margin-right: 15px;
    display: inline-block;
    padding: 10px 20px;
    background: #1d297b;
    border: 1px solid #1d297b;
    border-radius: 10px;
    font-size: 16px;
    font-family: "Luxia-Display";
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
}
.topnav a:hover, .topnav a.active {
    color: #000 !important;
    border-color: #dacd9d !important;
    background-color: #fff !important;
}

JS（只移除active类，保留其他样式类）

$('.topnav .topnav-centered a').on('click', function() {
   $('.topnav .topnav-centered a').removeClass('active');
   $(this).addClass('active');
});

多页面场景补充 #

如果你的网站是多页面结构（每个菜单对应独立HTML文件），需要在每个页面加载时自动匹配当前页面的菜单并高亮，可添加以下代码：

$(document).ready(function() {
  var currentPage = window.location.pathname.split('/').pop();
  $('.topnav .topnav-centered a').each(function() {
    var linkPage = $(this).attr('href').split('/').pop();
    if (currentPage === linkPage || (currentPage === '' && linkPage === '#')) {
      $(this).addClass('active');
    }
  });
});

内容的提问来源于stack exchange，提问作者S.I.