Bootstrap表单第二个标签页无法切换问题求助

你的标签页点击没反应，核心是两个问题：

• 导航链接缺少data-toggle="tab"属性，Bootstrap依赖这个属性触发标签页切换逻辑
• 页面未引入Bootstrap的JavaScript文件（Bootstrap 4及以下版本还需先引入jQuery）

修复步骤： #

1. 给每个导航标签的<a>标签添加data-toggle="tab"属性
2. 在页面底部引入对应版本的Bootstrap JS文件（Bootstrap 5无需额外引入jQuery）

修复后的完整代码： #

<div class="container" style="margin-top:70px">
 <div class ="card bg-light col-8">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs pull-left">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#contactos">Contactos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#domicilio">Domicilio</a>
      </li>
    </ul>
  </div>
  <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"])."?opc=".$opc."&id=".$id;?>" method="post" id ="formulario">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="contactos">  
       <div class="form-row" > <!--linea1-->
        <div class="col-3">
          <div class="form-group">
            <label for="text1">ID</label> 
            <input id="text1" name="text1" type="text" class="form-control" value="<?php echo $campo1?>" readonly>
          </div>
        </div>
       </div> <!--linea1-->
      </div> <!--tab contacto-->

      <div class="tab-pane fade" id="domicilio">
       <div class="form-row" > <!--linea5-->
        <div class="col">  
          <div class="form-group">
            <label for="text11">Calle</label> 
            <input id="text11" name="text11" type="text" class="form-control" value="<?php echo $campo11?>" required <?php if ($opc == 'C'){echo "readonly";}?>>
            <span class="error"><?php echo $error_text11;?></span>
          </div>
        </div>
      </div> <!--linea5-->
     </div> <!--tab domicilio-->
    </div>
     <div class="form-row"> <!--linea9-->
      <div class="col-6">
        <div class="form-group">
          <a href="contactos.php" id="cancel" name="cancel" class="btn btn-primary">Cancelar</a>
          <button name="submit" type="submit" class="btn btn-primary">Confirmar</button>
        </div>
      </div>
     </div> <!--linea9-->
  </form>
 </div>
</div>

<!-- 引入Bootstrap 5 JS（若使用Bootstrap 4需先引入jQuery） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

注：修复时将tab-content类从form标签移到独立div中，让结构更符合Bootstrap规范，避免潜在布局冲突。

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