如何在jQuery v3非UI标签页的内容区实现跨标签页链接跳转？

没问题！你的需求完全可以实现，核心思路是拦截内容区锚链接的点击事件，手动触发对应顶部标签的切换逻辑——毕竟你现有的标签切换逻辑只绑定在.tab-link上，默认的锚链接点击只会跳转到页面内元素，不会触发标签切换。

步骤1：确认现有基础切换逻辑 #

首先假设你现有的标签切换jQuery代码大概是这样的（如果和你的实际代码有出入，只需要调整选择器即可）：

// 现有顶部标签切换逻辑
$('.tab-link').on('click', function(e) {
  e.preventDefault();
  
  // 移除所有标签和内容的激活状态
  $('.tab-link').removeClass('active');
  $('.tab-content').removeClass('active');
  
  // 给当前点击的标签和对应内容添加激活状态
  $(this).addClass('active');
  $($(this).attr('href')).addClass('active');
});

步骤2：添加内容区链接的处理逻辑 #

在现有代码后面加上这段代码，专门处理.tab-content内的锚链接：

// 处理内容区的标签跳转链接
$('.tab-content a[href^="#"]').on('click', function(e) {
  const targetTabHash = $(this).attr('href');
  // 找到与链接href匹配的顶部.tab-link
  const targetTabLink = $('.tab-link[href="' + targetTabHash + '"]');
  
  // 如果找到对应的标签，就触发它的点击事件
  if (targetTabLink.length > 0) {
    e.preventDefault(); // 阻止默认的锚点跳转行为
    targetTabLink.trigger('click'); // 触发顶部标签的切换逻辑
    
    // 可选：更新URL的hash值，让刷新页面后能保留当前标签状态
    window.history.pushState(null, null, targetTabHash);
  }
});

步骤3：可选页面初始化时的Hash定位 #

如果希望用户直接访问带hash的URL（比如yourpage.html#case-story）时，自动切换到对应标签，可以再加这段初始化代码：

$(document).ready(function() {
  const initialHash = window.location.hash;
  if (initialHash) {
    const targetTabLink = $('.tab-link[href="' + initialHash + '"]');
    if (targetTabLink.length > 0) {
      targetTabLink.trigger('click');
    }
  }
});

关键说明 #

• 确保你的.tab-link的href属性值和对应.tab-content的id完全匹配（比如.tab-link的href="#case-story"对应.tab-content的id="case-story"）
• 这段代码会自动过滤掉内容区里不是指向标签页的锚链接（比如如果有其他指向页面内其他元素的链接，只要没有对应的.tab-link，就会保留默认跳转行为）

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