点击页面Tab触发提交及404错误，如何阻止该行为？

嘿，我完全懂你现在的困扰——刚入门JS和HTML的时候，这种“明明只是点个切换按钮，怎么就提交表单跳404了”的坑真的超容易踩！咱们一步步拆解问题，找到最直接的解决办法：

最常见的问题根源：按钮默认是提交类型 #

如果你的Tab切换按钮是放在<form>标签里面的，而且用的是<button>标签，那浏览器默认会把它当成提交按钮（type="submit"）！这就导致你一点击Tab，浏览器就自动触发表单提交，跳转到form的action地址（如果没设置action，就会刷新当前页甚至跳404）。

解决办法：给Tab按钮加上type="button" #

给每个用来切换Tab的按钮明确加上type="button"属性，告诉浏览器：“这只是个普通交互按钮，不是用来提交表单的！”

示例代码：

<!-- 错误写法：默认是submit类型，会触发表单提交 -->
<button class="tablinks" onclick="openTab(event, 'Group1')">分组1</button>

<!-- 正确写法：明确标记为普通按钮 -->
<button type="button" class="tablinks" onclick="openTab(event, 'Group1')">分组1</button>

如果是用<a>标签做Tab切换 #

要是你复制的W3School示例用的是<a>标签当Tab按钮，那点击它的默认行为是页面导航（哪怕href是#也会触发跳转），这也会导致类似的问题。

解决办法二选一： #

1. 换成<button>标签（更推荐，语义化更清晰，也不用处理跳转问题）
2. 阻止a标签的默认跳转行为：
   • 先把a标签的href改成javascript:void(0)，避免默认跳转：

     <a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Group1')">分组1</a>
     

   • 再在JS切换函数里加上阻止默认行为的代码：

     function openTab(evt, tabName) {
       // 原来的Tab切换逻辑（隐藏/显示内容、切换活跃状态）...
       
       // 阻止a标签的默认跳转行为
       evt.preventDefault();
       return false;
     }
     

关于你试过的return false和onsubmit #

你之前加的return false和onsubmit="return false"没生效，大概率是因为按钮本身是submit类型——这时候表单提交的触发源是按钮，不是form的submit事件，所以阻止form的submit事件没用。把按钮改成type="button"才是最根本的解决方式。

完整的可运行示例（结合表单场景） #

给你一个包含表单的Tab组件示例，确保点击Tab不会提交表单：

<style>
/* 简单的Tab样式，和W3School示例一致 */
.tablinks {
  background-color: #eee;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}
.tablinks.active {
  background-color: #ccc;
}
.tabcontent {
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

<form>
  <!-- Tab切换按钮：必须加type="button" -->
  <button type="button" class="tablinks active" onclick="openTab(event, 'Personal')">个人信息</button>
  <button type="button" class="tablinks" onclick="openTab(event, 'Contact')">联系方式</button>

  <!-- Tab内容区域 -->
  <div id="Personal" class="tabcontent">
    <label>姓名：<input type="text" name="username"></label><br>
    <label>年龄：<input type="number" name="age"></label>
  </div>
  <div id="Contact" class="tabcontent" style="display: none;">
    <label>电话：<input type="tel" name="phone"></label><br>
    <label>邮箱：<input type="email" name="email"></label>
  </div>

  <!-- 真正的表单提交按钮，这个才用type="submit" -->
  <button type="submit" style="margin-top: 20px;">提交表单</button>
</form>

<script>
function openTab(evt, tabName) {
  // 获取所有Tab内容和按钮
  const tabContents = document.getElementsByClassName("tabcontent");
  const tabLinks = document.getElementsByClassName("tablinks");

  // 隐藏所有Tab内容
  for (let i = 0; i < tabContents.length; i++) {
    tabContents[i].style.display = "none";
  }

  // 移除所有按钮的活跃状态
  for (let i = 0; i < tabLinks.length; i++) {
    tabLinks[i].className = tabLinks[i].className.replace(" active", "");
  }

  // 显示当前Tab内容，标记按钮为活跃
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

按照这个方式修改，你的Tab切换就不会再触发表单提交啦！

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