页面重载后Active菜单背景不显示，始终停留在首个菜单的问题

你遇到的核心问题是：点击菜单后页面会重载，JS里的点击事件刚给按钮加上active类，页面就刷新了，之前的状态直接丢失，所以刷新后还是默认的第一个菜单有active类。

修复思路 #

不要靠点击事件加active，而是根据当前页面的URL，主动给对应菜单按钮加上active类，页面加载时就判断，这样刷新后状态能正确保留。

方案一：用PHP直接生成（推荐，WordPress环境下更可靠） #

修改HTML部分，去掉硬编码的active类，用PHP判断当前页面URL是否匹配菜单的href，匹配就加active：

<?php
defined('ABSPATH') or exit;

// 获取当前页面的完整URL
$current_url = get_permalink();
// 定义两个菜单的URL
$habit_url = site_url('settings/habit-settings/');
$team_url = site_url('settings/team-settings/');
?>

<div id="myDIV">
<nav class="bp-navs bp-subnavs no-ajax user-subnav" id="subnav" role="navigation" aria-label="Sub Menu">
<ul class="subnav">

    <li class="bp-personal-sub-tab <?php echo ($current_url === $habit_url) ? 'current selected' : ''; ?>">
        <a href="<?php echo $habit_url; ?>" class="btn <?php echo ($current_url === $habit_url) ? 'active' : ''; ?>"> Habit Setting </a>
    </li>
    
    <li class="bp-personal-sub-tab <?php echo ($current_url === $team_url) ? 'current selected' : ''; ?>">
        <a href="<?php echo $team_url; ?>" class="btn <?php echo ($current_url === $team_url) ? 'active' : ''; ?>"> Team Setting </a>
    </li>

</ul>
</nav>
</div><!-- .item-list-tabs#subnav -->

<style>
.btn {
  outline: none !important;
  cursor: pointer !important;
}

.active, .btn:hover {
  background-color: red !important;
  color: #fff; /* 红色背景配白色文字更清晰，原红色文字完全看不见 */
}
</style>

方案二：用JS在页面加载时判断 #

如果不想改PHP，也可以在页面加载完成后，根据当前URL匹配菜单的href，给对应按钮加active：

<?php
defined('ABSPATH') or exit;

// TODO: Refactor tabs
?>

<div id="myDIV">
<nav class="bp-navs bp-subnavs no-ajax user-subnav" id="subnav" role="navigation" aria-label="Sub Menu">
<ul class="subnav">

    <li class="bp-personal-sub-tab">
        <a href="<?php echo site_url('settings/habit-settings/'); ?>" class="btn"> Habit Setting </a>
    </li>
    
    <li class="bp-personal-sub-tab">
        <a href="<?php echo site_url('settings/team-settings/'); ?>" class="btn"> Team Setting </a>
    </li>

</ul>
</nav>
</div><!-- .item-list-tabs#subnav -->

<style>
.btn {
  outline: none !important;
  cursor: pointer !important;
}

.active, .btn:hover {
  background-color: red !important;
  color: #fff;
}
</style>

<script>
// 页面加载完成后执行判断
document.addEventListener('DOMContentLoaded', function() {
    const currentPath = window.location.href;
    const btns = document.querySelectorAll('.btn');
    
    btns.forEach(btn => {
        if(btn.href === currentPath) {
            // 先移除所有按钮的active类
            btns.forEach(b => b.classList.remove('active'));
            // 给当前匹配的按钮加active类
            btn.classList.add('active');
            // 同步处理li标签的选中状态
            const li = btn.closest('.bp-personal-sub-tab');
            document.querySelectorAll('.bp-personal-sub-tab').forEach(l => l.classList.remove('current', 'selected'));
            li.classList.add('current', 'selected');
        }
    });
});
</script>

额外注意点 #

• 原CSS里color: red在红色背景下完全不可见，建议改成color: #fff（白色）
• 原来的点击事件JS可以直接删掉，因为页面刷新后它的操作不会生效，反而可能干扰新逻辑

内容的提问来源于stack exchange，提问作者Md maniruzzaman Moon