点击带href锚点的a标签无法切换到对应div标签问题求解

问题原因 #

你使用的是Bootstrap框架的标签页（Tabs）组件，该组件的内容切换效果不属于原生HTML功能，依赖框架对应的JS脚本执行，出现仅URL哈希变化、内容不切换的问题基本都是依赖引入异常或者版本属性不匹配导致。

排查与解决方案 #

• 检查依赖引入是否正确
  不同版本的Bootstrap需要的依赖和属性有差异，确认你页面中已经按正确顺序引入了对应资源：
  • Bootstrap 3：需要先引入jQuery，再引入Bootstrap JS文件，最后引入Bootstrap CSS文件，你的现有代码里的data-toggle="tab"、fade in类名都是Bootstrap 3的标准写法，只要依赖引入正确就能正常运行。
  • Bootstrap 4：同样需要先引入jQuery、再引入Popper.js、之后引入Bootstrap JS和CSS，属性写法和类名和Bootstrap 3兼容。
  • Bootstrap 5：不再依赖jQuery，data-toggle="tab"需要改成data-bs-toggle="tab"，激活状态的fade in需要改成fade show，和你现有代码的属性写法不匹配，如果用的是Bootstrap 5需要对应修改属性。
• 手动实现切换逻辑（不需要依赖Bootstrap JS）
  如果你不想引入额外的JS依赖，可以直接加入以下原生JS代码实现切换效果：

document.querySelectorAll('.nav-tabs a').forEach(tab => {
  tab.addEventListener('click', function(e) {
    e.preventDefault()
    // 移除所有标签和面板的激活状态
    document.querySelectorAll('.nav-tabs li').forEach(item => item.classList.remove('active'))
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.remove('active', 'in')
    })
    // 给当前点击的标签和对应面板加激活状态
    this.parentElement.classList.add('active')
    const targetPane = document.querySelector(this.getAttribute('href'))
    targetPane.classList.add('active', 'in')
  })
})

现有代码修正后示例（适配Bootstrap 3） #

你提供的代码本身没有语法错误，仅需确认依赖引入正常即可运行，完整的可运行参考代码如下：

<!-- 按顺序引入对应本地资源：jQuery -->
<script src="你本地存放的jQuery文件路径"></script>
<!-- 引入Bootstrap JS文件 -->
<script src="你本地存放的对应版本Bootstrap JS文件路径"></script>
<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="你本地存放的对应版本Bootstrap CSS文件路径">

<ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#personal" role="tab" data-toggle="tab">个人信息</a></li>
      <li role="presentation"><a href="#work" role="tab" data-toggle="tab">工作信息</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="personal">
        <table class="table table-hover m-b-0">
          <tbody>
            <tr>
              <td width="20%" class="noborder">手机</td>
              <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['personal']['mobile'] ?>" class="text-info"><?php echo $details['personal']['mobile'] ?></a></td>
              <td width="20%" class="noborder">电话</td>
              <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['personal']['phone'] ?>"  class="text-info"><?php echo $details['personal']['phone'] ?></a></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div role="tabpanel" class="tab-pane fade" id="work">
        <table class="table table-hover m-b-0">
          <tbody>
            <tr>
              <td width="20%" class="noborder">手机</td>
              <td width="30%" class="noborder active"><i class="fa fa-mobile"></i> <a href="tel:<?php echo $details['work']['mobile'] ?>" class="text-info"><?php echo $details['work']['mobile'] ?></a></td>
              <td class="noborder" width="20%">电话</td>
              <td class="active noborder"><i class="fa fa-phone"></i> <a href="tel:<?php echo $details['work']['phone'] ?>"  class="text-info"><?php echo $details['work']['phone'] ?></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

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