点击铃铛图标跳转至myAccount页面非激活message标签页的实现方法

你当前使用的Bootstrap标签页组件默认不会自动识别URL中的hash值切换激活标签，需要额外加JS逻辑处理跳转后的标签激活状态，操作步骤如下：

• 第一步：先修复头部页面的HTML语法错误，你当前的notify类div少了闭合引号，修改后代码如下：

<div class="notify" id="notify">
    <a href="/myAccount#message" class="not-bell"><i class="fa fa-bell"></i></a>
</div>

• 第二步：在myAccount页面添加对应JS逻辑即可
  如果你的项目使用Bootstrap 3/4（依赖jQuery），添加如下代码：

// 页面加载完成后执行
$(document).ready(function() {
    // 读取URL中的hash值
    const hash = window.location.hash;
    // 判断hash存在且对应标签存在再执行切换
    if (hash && $(`a[href="${hash}"]`).length) {
        // 移除所有标签的默认激活状态
        $('.nav-tabs li, .nav-tabs a, .tab-pane').removeClass('active show');
        // 激活目标标签和对应内容
        $(`a[href="${hash}"]`).addClass('active show').closest('li').addClass('active');
        $(hash).addClass('active show');
    }
});

如果你使用的是Bootstrap 5，可直接调用官方标签API实现，代码更简洁：

document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash;
    const tabTrigger = document.querySelector(`a[href="${hash}"]`);
    if (tabTrigger) {
        const tabInstance = new bootstrap.Tab(tabTrigger);
        tabInstance.show();
    }
});

修改完成后点击铃铛图标跳转后就会自动激活message标签页。

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