能否通过URL链接预选中指定button按钮？实现该功能是否需要新增脚本？

实现方案 #

结论 #

可以实现该效果，需要添加一小段JavaScript脚本处理URL参数并触发对应按钮的点击逻辑。

实现步骤 #

1. 首先约定URL的传参规则，推荐使用URL哈希（不会触发页面重新请求），规则如下：
   • 要默认选中one按钮，访问地址为 你的页面地址#uno
   • 要默认选中two按钮，访问地址为 你的页面地址#dos
   • 要默认选中three按钮，访问地址为 你的页面地址#tres
2. 在页面中添加如下JavaScript脚本即可：

document.addEventListener('DOMContentLoaded', function() {
  // 提取URL哈希值并去掉开头的#
  const activeButtonId = window.location.hash.slice(1);
  // 校验是否存在匹配的tab按钮
  const targetButton = document.getElementById(activeButtonId);
  if (targetButton?.classList.contains('tablinks')) {
    // 模拟点击对应按钮，触发已有的openCity逻辑
    targetButton.click();
  }
});

可选调整 #

如果不想用哈希传参，也可以用查询参数的形式，比如访问地址为你的页面地址?activeTab=1，对应修改脚本的参数读取逻辑即可：

document.addEventListener('DOMContentLoaded', function() {
  const params = new URLSearchParams(window.location.search);
  const activeTabNum = params.get('activeTab');
  const tabIdMap = {
    '1': 'uno',
    '2': 'dos',
    '3': 'tres'
  };
  const targetButton = document.getElementById(tabIdMap[activeTabNum]);
  if (targetButton) {
    targetButton.click();
  }
});

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