如何通过URL触发jQuery脚本实现选项卡导航指定标签加载

需求说明 #

现有一个垂直选项卡导航菜单，通过jQuery修改CSS样式切换DIV内容的显示/隐藏，页面加载默认显示第一个内容。需要支持通过URL查询参数直接指定打开页面时显示的标签，例如访问页面地址?tab=neurofeedback时，自动加载第三个“Neurofeedback”标签内容，无需手动点击。

解决方案 #

替换原有的Cookie读取逻辑，改为解析URL中的tab参数，同时重构重复的标签激活代码，通过映射关系简化逻辑，提升可维护性。

修改后的完整代码 #

<div class="naccs">
  <div class="gc gc--1-of-3">
    <div class="menu">
      <div id="biofeedback"><span>Biofeedback</span></div>
      <div id="hrv"><span>Heart rate variability</span></div>
      <div id="neurofeedback"><span>Neurofeedback</span></div>
      <div id="muscle-rehabilitation"><span>Muscle rehabilitation</span></div>
      <div id="peak-performance"><span>Peak performance</span></div>
      <div id="continence-training"><span>Continence training</span></div>
      <div id="research"><span>Research</span></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
        // 解析URL中的tab参数
        function getUrlParam(name) {
          const urlParams = new URLSearchParams(window.location.search);
          return urlParams.get(name);
        }

        $(document).ready(function() {
          // 定义标签ID与对应内容列表索引的映射
          const tabMap = {
            'biofeedback': 0,
            'hrv': 1,
            'neurofeedback': 2,
            'muscle-rehabilitation': 3,
            'peak-performance': 4,
            'continence-training': 5,
            'research': 6
          };

          // 获取URL中的tab参数，默认使用第一个标签
          const targetTab = getUrlParam('tab') || 'biofeedback';
          const targetIndex = tabMap[targetTab];

          // 验证参数有效性，防止非法值
          if (targetIndex !== undefined) {
            // 滚动到选项卡区域
            $('html, body').animate({
              scrollTop: $(".naccs").offset().top
            }, 10);

            // 移除所有激活状态
            $('.menu div.active').removeClass('active');
            $('.nacc li.active').removeClass('active');

            // 激活目标标签和对应内容
            $('#' + targetTab).addClass('active');
            $('.nacc li').eq(targetIndex).addClass('active');
          } else {
            // 参数无效时默认激活第一个标签
            $('#biofeedback').addClass('active');
            $('.nacc li').eq(0).addClass('active');
          }
        });
      </script>
    </div>
  </div>

  <!-- 内容DIV区域 -->
  <div class="gc gc--2-of-3">
    <ul id="repo" class="nacc">
      <li class="active">
        <h4>Biofeedback</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Heart rate variability</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Neurofeedback</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Muscle rehabilitation</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Peak performance</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Continence training</h4>
        <p>CONTENT</p>
      </li>
      <li>
        <h4>Research</h4>
        <p>CONTENT</p>
      </li>
    </ul>
  </div>
</div>

使用说明 #

• 直接访问页面时，默认显示第一个“Biofeedback”标签内容。
• 要指定打开特定标签，只需在URL后添加?tab=标签ID，例如：
  • 打开第三个标签：页面地址?tab=neurofeedback
  • 打开最后一个标签：页面地址?tab=research

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