如何使用URL链接切换MDL选项卡？获取特定选项卡直接链接

核心逻辑说明 #

MDL选项卡默认依赖锚点关联面板，但页面加载时不会自动识别URL中的锚点切换选项卡，需要补充JS逻辑来实现这一功能，同时确保URL能同步选项卡状态。

实现步骤 #

1. 确认选项卡与面板的锚点对应关系 #

你的现有选项卡代码已经设置了锚点href，需保证对应的选项卡面板id与锚点完全匹配，示例面板代码如下：

<div class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
  <!-- Tab 1 内容区域 -->
</div>
<div class="mdl-layout__tab-panel" id="fixed-tab-2">
  <!-- Tab 2 内容区域 -->
</div>
<div class="mdl-layout__tab-panel" id="fixed-tab-3">
  <!-- Tab 3 内容区域 -->
</div>

2. 页面加载时自动激活对应选项卡 #

添加以下JS代码，在页面加载完成后读取URL锚点，自动切换到对应选项卡：

document.addEventListener('DOMContentLoaded', function() {
  const hash = window.location.hash;
  if (!hash) return;

  // 清除所有选项卡和面板的激活状态
  document.querySelectorAll('.mdl-layout__tab.is-active').forEach(tab => {
    tab.classList.remove('is-active');
  });
  document.querySelectorAll('.mdl-layout__tab-panel.is-active').forEach(panel => {
    panel.classList.remove('is-active');
  });

  // 激活目标选项卡和面板
  const targetTab = document.querySelector(`.mdl-layout__tab[href="${hash}"]`);
  const targetPanel = document.querySelector(hash);
  if (targetTab && targetPanel) {
    targetTab.classList.add('is-active');
    targetPanel.classList.add('is-active');
    // 触发MDL组件更新，确保交互正常
    componentHandler?.upgradeElement(targetTab);
    componentHandler?.upgradeElement(targetPanel);
  }
});

3. 生成指向特定选项卡的直接链接 #

现在可以直接使用带锚点的URL访问对应选项卡：

• Tab 1 链接：你的页面地址.html#fixed-tab-1
• Tab 2 链接：你的页面地址.html#fixed-tab-2
• Tab 3 链接：你的页面地址.html#fixed-tab-3

4. 优化：点击选项卡同步更新URL锚点 #

如果希望用户点击选项卡时URL自动更新锚点（方便分享当前状态），添加以下点击事件监听：

document.querySelectorAll('.mdl-layout__tab').forEach(tab => {
  tab.addEventListener('click', function() {
    const tabHref = this.getAttribute('href');
    if (tabHref.startsWith('#')) {
      window.location.hash = tabHref;
    }
  });
});

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