如何在Bootstrap侧边栏点击时优雅更新页面内容及侧边栏激活状态

嘿，我完全懂你现在的感受——用hashchange事件切换内容虽然能跑起来，但总觉得有点繁琐，还得单独处理侧边栏的激活状态，确实不够顺手！咱们来把这个流程优化得更优雅、更易维护，一步解决两个问题。

核心思路：集中处理点击事件 #

与其等着地址栏hash变化再做处理，不如直接监听侧边栏链接的点击事件，这样能同时搞定内容切换和侧边栏激活状态更新，逻辑更集中，体验也更流畅。

具体实现步骤 #

1. 给内容容器加统一类名

先给所有需要切换的内容div加上一个共同的类（比如content-container），这样后续选择器会更简洁，新增页面也不用改JS：

<!-- Network内容容器 -->
<div id="network" class="content-container justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
  <!-- 内容省略 -->
</div>
<!-- Tally内容容器 -->
<div id="tally" class="content-container d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
  <!-- 内容省略 -->
</div>
<!-- 其他内容容器同理，初始隐藏的加d-none -->

2. 编写整合逻辑的JavaScript

用jQuery（贴合你现有代码）写一个点击事件处理函数，一次性完成所有操作：

$(document).ready(function() {
  // 监听侧边栏所有链接的点击事件
  $('.sidebar .nav-link').on('click', function(e) {
    // 阻止默认跳转行为（避免点击链接后页面滚到顶部）
    e.preventDefault();
    
    // 获取当前点击链接对应的目标内容容器hash
    const targetHash = $(this).attr('href');
    // 获取链接的文本作为页面标题（也可以用data-title属性自定义标题）
    const pageTitle = $(this).text().trim();

    // 步骤1：更新侧边栏激活状态
    // 先移除所有链接的active类
    $('.sidebar .nav-link').removeClass('active');
    // 给当前点击的链接加上active类
    $(this).addClass('active');

    // 步骤2：切换内容显示
    // 先隐藏所有内容容器
    $('.content-container').addClass('d-none');
    // 显示目标内容容器
    $(targetHash).removeClass('d-none');

    // 步骤3：更新页面标题
    $('#pageTitle').text(pageTitle);

    // 可选：更新地址栏hash，保留浏览器历史记录（前进后退能正常切换）
    window.history.pushState({}, '', targetHash);
  });

  // 处理页面初始加载时的hash（比如用户直接访问带#network的URL）
  const initialHash = window.location.hash;
  if (initialHash && $(initialHash).length) {
    // 模拟点击对应的侧边栏链接，自动切换到对应内容
    $('.sidebar .nav-link[href="' + initialHash + '"]').click();
  }
});

为什么这样更好？ #

• 逻辑集中：把激活状态、内容切换、标题更新放在同一个事件里，以后维护起来一目了然
• 扩展性强：新增页面只需添加带对应hash的侧边栏链接和content-container类的内容div，完全不用修改JS代码
• 体验优化：阻止默认跳转避免页面滚动，同时支持浏览器前进后退（因为更新了地址栏hash）
• 容错性好：页面初始加载时如果带hash，会自动切换到对应内容和激活状态

额外小提示 #

如果你的侧边栏链接文本和页面标题不一样，可以给链接加data-title属性，比如：

<a class="nav-link" href="#network" data-title="网络设置">
  <span data-feather="globe"></span>
  Network
</a>

然后在JS里改成const pageTitle = $(this).data('title') || $(this).text().trim();，这样标题更灵活。

备注：内容来源于stack exchange，提问作者Johan