jQuery中href哈希值失效：点击标签页URL未更新为#foo/#bar

看起来你的标签页能正常切换内容，但浏览器地址栏的URL没有加上对应的#foo或#bar锚点，这大概率是因为你的标签页交互代码阻止了浏览器的默认跳转行为，或者没有正确配置标签页组件。下面给你几个针对性的解决方案：

1. 检查并移除阻止默认行为的代码 #

如果你的项目里有自定义的标签页点击事件，比如类似这样的JS代码：

$('.tabs a').click(function(e) {
  e.preventDefault(); // 这行代码会阻止浏览器更新URL锚点
  // 这里是切换标签内容的逻辑
});

直接删掉e.preventDefault()这一行就可以了——浏览器会自动处理锚点跳转，同时URL也会更新成abc.com/1#foo的格式。

2. 手动更新URL（如果必须保留阻止默认行为） #

要是因为某些业务逻辑，你不能去掉e.preventDefault()，那可以在切换完标签内容后，手动修改URL的锚点：

$('.tabs a').click(function(e) {
  e.preventDefault();
  const targetHash = $(this).attr('href');
  
  // 先执行你的标签内容切换逻辑，比如：
  $('#pet-details-group .tab-pane').hide();
  $(targetHash).show();
  
  // 手动更新URL锚点
  location.hash = targetHash;
  // 如果你不想让页面自动滚动到锚点位置，可以用pushState：
  // history.pushState(null, null, targetHash);
});

3. 用原生Bootstrap标签页组件（如果基于Bootstrap开发） #

从你的HTML结构看，你用了Bootstrap的导航栏样式，那直接用Bootstrap官方的标签页组件更省心，默认就会自动更新URL锚点。调整你的HTML结构成这样：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-left tabs" role="tablist">
    <li role="presentation">
      <a href="#foo" aria-controls="foo" role="tab" data-toggle="tab">Foooo</a>
    </li>
    <li role="presentation">
      <a href="#bar" aria-controls="bar" role="tab" data-toggle="tab">Barrr</a>
    </li>
  </ul>
</div>

<!-- 对应的标签内容容器，注意id要和data-tabgroup对应 -->
<div class="tab-content" id="pet-details-group">
  <div role="tabpanel" class="tab-pane" id="foo">这里是Foo的内容</div>
  <div role="tabpanel" class="tab-pane" id="bar">这里是Bar的内容</div>
</div>

确保你已经引入了Bootstrap的JS文件，这样点击标签时，URL会自动更新，内容也会切换。

4. 额外优化：页面加载时自动匹配锚点 #

为了让用户直接访问带锚点的URL（比如abc.com/1#bar）时，页面能自动切换到对应标签，再加一段初始化代码：

$(document).ready(function() {
  const currentHash = window.location.hash;
  if (currentHash) {
    $('.tabs a[href="' + currentHash + '"]').click();
    // 如果用Bootstrap，也可以用官方方法：
    // $('a[href="' + currentHash + '"]').tab('show');
  }
});

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