jQuery UI 1.12：如何通过URL哈希标签激活标签页（适配jQuery1.10+）

嘿，我完全懂你的困扰——那些几年前的老方案在jQuery 1.10+里确实失效了，毕竟.live()这类旧方法早就被移除了。下面给你一套适配新版本的可靠实现，亲测好用：

首先，先假设你的标签页用的是常见的结构（如果你的结构不一样，只要调整选择器就行）：

<!-- 标签导航栏 -->
<ul class="tab-nav">
  <li><a href="#tab-about" class="tab-link">关于我们</a></li>
  <li><a href="#tab-services" class="tab-link">服务项目</a></li>
  <li><a href="#tab-contact" class="tab-link">联系我们</a></li>
</ul>

<!-- 标签内容区域 -->
<div class="tab-container">
  <div id="tab-about" class="tab-pane">这里是关于我们的内容...</div>
  <div id="tab-services" class="tab-pane">这里是服务项目的内容...</div>
  <div id="tab-contact" class="tab-pane">这里是联系我们的内容...</div>
</div>

先加基础CSS来控制显示隐藏：

/* 默认隐藏所有标签内容 */
.tab-pane {
  display: none;
}
/* 激活的标签内容显示 */
.tab-pane.active {
  display: block;
}
/* 高亮激活的导航项 */
.tab-nav .active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}

接下来是核心的jQuery代码，完全适配1.10+版本：

$(document).ready(function() {
  // 定义统一的标签激活函数，避免重复代码
  function activateTab(targetHash) {
    // 先移除所有元素的激活状态
    $('.tab-link').removeClass('active');
    $('.tab-pane').removeClass('active');
    
    // 给目标导航和内容添加激活类
    $('.tab-link[href="' + targetHash + '"]').addClass('active');
    $(targetHash).addClass('active');
  }

  // 页面加载时的处理逻辑
  var initialHash = window.location.hash;
  if (initialHash && $(initialHash).length) {
    // 如果URL有哈希且对应元素存在，激活该标签
    activateTab(initialHash);
  } else {
    // 没有哈希的话，默认激活第一个标签
    $('.tab-link').first().addClass('active');
    $('.tab-pane').first().addClass('active');
  }

  // 点击标签导航时的处理
  $('.tab-link').on('click', function(e) {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    var targetHash = $(this).attr('href');
    
    activateTab(targetHash);
    // 更新URL哈希，让用户可以通过前进后退切换标签
    window.location.hash = targetHash;
  });

  // 监听浏览器前进后退事件，同步标签状态
  $(window).on('popstate', function() {
    var currentHash = window.location.hash;
    if (currentHash && $(currentHash).length) {
      activateTab(currentHash);
    }
  });
});

几个关键注意点： #

• 用.on()绑定事件：这是jQuery 1.7+推荐的事件绑定方式，完全替代了旧的.bind()、.live()，适配1.10+毫无问题。
• 哈希存在性检查：每次处理哈希前都判断$(hash).length，避免因为无效哈希导致报错。
• 支持浏览器历史：通过popstate事件监听前进后退，让标签切换和浏览器历史同步，体验更流畅。

如果你的标签页结构和示例不同，只需要把代码中的.tab-link、.tab-pane这些选择器换成你实际用的类名或ID就行。

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