Jquery Organic Tabs问题：上下导航栏current类高亮不同步

这个问题我之前也碰到过——原组件的JavaScript逻辑只针对单个导航容器做了状态更新，所以当你复制导航栏到内容上下后，点击其中一个导航的标签时，另一个导航的对应项不会自动加上current类，导致高亮不同步。

咱们只需要修改一下JS逻辑，让它能识别所有导航栏的标签，并且同步它们的current状态，具体步骤如下：

1. 修改JavaScript代码 #

原组件的JS只会处理单个导航栏的点击事件，咱们把它改成全局监听所有导航标签的点击，并且根据href属性同步所有匹配的标签状态：

$(function() {
  // 初始化内容区域：隐藏所有内容，只显示第一个
  var tabContainers = $('div.tabs > div');
  tabContainers.hide().filter(':first').show();

  // 给所有导航栏里的标签绑定点击事件
  $('.nav a').click(function () {
    // 获取当前点击标签对应的内容ID（hash值）
    var targetContentId = this.hash;

    // 切换内容显示：隐藏所有内容，显示目标内容
    tabContainers.hide();
    tabContainers.filter(targetContentId).show();

    // 移除所有导航标签的current类
    $('.nav a').removeClass('current');

    // 给所有href匹配的导航标签添加current类（包括当前点击的和另一个导航里的对应项）
    $('.nav a[href="' + targetContentId + '"]').addClass('current');

    return false; // 阻止默认跳转行为
  }).filter(':first').click(); // 初始化时触发第一个标签的点击事件，确保初始状态正确
});

2. 确保HTML结构一致 #

你的两个导航栏结构要保持一致，每个标签的href必须和对应内容的id完全匹配，比如：

<!-- 顶部导航栏 -->
<ul class="nav">
  <li class="nav-one"><a href="#description" class="current">description</a></li>
  <li class="nav-two"><a href="#itinerary">itinerary</a></li>
  <!-- 更多标签 -->
</ul>

<!-- 内容区域 -->
<div class="tabs">
  <div id="description">这里是描述内容...</div>
  <div id="itinerary">这里是行程内容...</div>
  <!-- 更多内容块 -->
</div>

<!-- 底部导航栏 -->
<ul class="nav">
  <li class="nav-one"><a href="#description" class="current">description</a></li>
  <li class="nav-two"><a href="#itinerary">itinerary</a></li>
  <!-- 更多标签 -->
</ul>

关键修改点说明 #

• 把原有的导航选择器从$('div.tabs ul.nav a')改成了全局的.nav a，这样所有带nav类的导航栏标签都会被监听。
• 点击时不再只更新当前导航栏的标签状态，而是通过href属性找到所有匹配的标签，统一添加/移除current类，实现双导航栏的状态同步。
• 内容区域的切换逻辑和原组件保持一致，不影响原有功能。

这样修改后，不管你点击顶部还是底部的导航标签，两个导航栏的对应项都会同步高亮，内容区域也能正常切换啦～

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