Bootstrap标签页切换时修改URL（WordPress环境）

不用放弃Bootstrap，只需添加一段轻量JS代码就能同时满足你的两个需求，无需修改原有HTML结构，具体实现如下：

完整代码（含新增JS） #

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
        <li class="nav"><a href="#B" data-toggle="tab">B</a></li>
        <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="A">Content inside tab A</div>
        <div class="tab-pane fade" id="B">Content inside tab B</div>
        <div class="tab-pane fade" id="C">Content inside tab C</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
    // 页面加载时根据URL锚点激活对应标签
    var hash = window.location.hash;
    if (hash && $(hash).length) {
        $('.nav-tabs li.active').removeClass('active');
        $('.tab-content .tab-pane.active').removeClass('active in');
        $('.nav-tabs a[href="' + hash + '"]').parent('li').addClass('active');
        $(hash).addClass('active in');
    }

    // 标签切换完成后更新URL锚点
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
        var targetHash = $(e.target).attr('href');
        history.pushState(null, null, targetHash);
    });

    // 监听URL锚点变化，自动切换对应标签
    $(window).on('hashchange', function() {
        var hash = window.location.hash;
        if (hash && $(hash).length) {
            $('.nav-tabs a[href="' + hash + '"]').tab('show');
        }
    });
});
</script>

代码说明 #

• 页面加载处理：检测当前URL的hash值，若存在匹配的标签ID，自动激活对应标签和内容面板，实现直接访问带锚点URL打开对应标签的需求。
• 标签点击同步URL：利用Bootstrap原生的shown.bs.tab事件（标签切换完成后触发），通过history.pushState更新URL的hash，既同步了URL状态，又不会触发页面刷新。
• 锚点变化监听：监听浏览器的hashchange事件，当用户手动修改URL锚点、使用前进后退按钮时，自动切换到对应标签，保证刷新页面或跳转后状态一致。

这种方案完全基于Bootstrap原生组件扩展，无需自行开发导航，代码简洁且符合你的需求。

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