下拉菜单项点击后无法激活Tablist并跳转到Tab内容的问题

嘿，我明白你的问题了——点击下拉菜单里的选项时，现在只能显示对应的Tab内容，但顶部的Tab导航栏不会同步高亮激活，也没实现页面跳转效果对吧？咱们来一步步修复这个问题：

问题分析 #

你原来的JS代码存在语法错误（括号不匹配），而且缺少同步更新顶部Tab导航激活状态的逻辑，所以才会出现只显示内容但导航无响应的情况。另外你的Tab内容初始状态里三个都加了active类，这会导致默认显示所有Tab内容，也需要调整。

修正后的完整代码 #

保持HTML结构基本不变，调整Tab内容的初始状态并替换JS代码：

<!-- 下拉菜单 -->
<li><a href="#" data-toggle="dropdown" class="dropdown-toggle">Category<b class="caret"></b></a>
  <ul class="dropdown-menu" id="categorydd">
    <li><a href="#fday" data-toggle="tab">First Day</a></li>
    <li><a href="#sday" data-toggle="tab">Second Day</a></li>
    <li><a href="#tday" data-toggle="tab">Third Day</a>
  </ul>
</li>

<!-- Tab导航 -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#fday" aria-controls="fday" role="tab" data-toggle="tab">FIRST DAY</a></li>
  <li><a href="#sday" aria-controls="sday" role="tab" data-toggle="tab">SECOND DAY</a></li>
  <li><a href="#tday" aria-controls="tday" role="tab" data-toggle="tab">THIRD DAY</a></li>
</ul>

<!-- Tab内容（修正初始active类） -->
<div role="tabpanel" class="tab-pane active" id="fday">First Day 内容...</div>
<div role="tabpanel" class="tab-pane" id="sday">Second Day 内容...</div>
<div role="tabpanel" class="tab-pane" id="tday">Third Day 内容...</div>

<script>
$('#categorydd a').click(function (e) {
  // 先阻止默认锚点跳转，优先处理Tab切换逻辑
  e.preventDefault();
  
  // 获取当前点击项对应的Tab ID
  const targetTabId = $(this).attr('href');
  
  // 1. 切换显示对应的Tab内容
  $(targetTabId).tab('show');
  
  // 2. 同步激活顶部的Tab导航项
  $('.nav-tabs li').removeClass('active');
  $('.nav-tabs a[href="' + targetTabId + '"]').parent('li').addClass('active');
  
  // 3. 实现平滑跳转到Tab区域（可选，按需保留）
  $('html, body').animate({
    scrollTop: $(targetTabId).offset().top
  }, 300);
});
</script>

关键逻辑说明 #

• 修复了原JS的语法错误，确保tab('show')调用正确
• 添加导航同步逻辑：移除所有导航项的active类，给对应Tab的父级li添加激活状态，保证导航与内容同步
• 可选平滑滚动：点击后页面会自动滚动到目标Tab区域，优化用户体验
• 修正Tab内容初始状态：只保留默认Tab的active类，避免初始显示多个内容

这样调整后，点击下拉菜单选项时就能同时实现：显示对应Tab内容、激活顶部Tab导航、平滑跳转到Tab区域这三个需求啦！

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