如何使用jQuery显示自定义导航标签的对应内容？

看起来你已经搞定了标签的激活状态切换，现在只需要补全内容切换的逻辑就可以啦！我来给你梳理一下具体的实现步骤：

步骤1：完善HTML结构，补充数据关联 #

首先，你需要给每个标签元素加上data-id属性，用来和对应的内容区域做关联——这也是你代码里elem.data('id')要用到的，原来的HTML里没加，所以先补上：

<div class="row"> 
 <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active" data-id="item1"> 
 <p>Item 1</p> 
 </div> 
 <div class="col-4 master-advanced-left-tab" data-id="item2"> 
 <p>Item 2</p> 
 </div> 
 <div class="col-4 master-advanced-left-tab" data-id="item3"> 
 <p>Item 3</p> 
 </div> 
</div> 
<div class="item-content item1"> Show content from item 1 </div> 
<div class="item-content item2"> Show content from item 2 </div> 
<div class="item-content item3"> Show content from item 3 </div>

这里我给所有内容区域加了一个共同的类item-content，方便批量操作，当然你也可以用其他选择器，不过统一类名会更简洁。

步骤2：调整CSS，默认隐藏非激活内容 #

初始状态下，我们只显示默认激活的Item1内容，其他内容先隐藏：

.master-advanced-left-tab { overflow: hidden; cursor: pointer; padding-bottom: 10px; padding-top: 10px; } 
.master-advanced-left-tab > p { text-overflow: ellipsis; height: 20px; } 
.master-advanced-left-tab-active { color: #1C72DF; border-bottom: 3px #1C72DF solid; }
/* 新增：默认隐藏所有内容区域，除了默认激活的item1 */
.item-content { display: none; }
.item1 { display: block; }

步骤3：补全jQuery的内容切换逻辑 #

在你已有的标签激活代码后面，加上内容切换的逻辑就可以了。不用复杂的toggle()，直接先隐藏所有内容，再显示对应ID的内容更直观：

// 假设elem是当前点击的标签元素（你应该是在点击事件里的，比如$('.master-advanced-left-tab').click(function(){...})）
$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');

// 内容切换逻辑
const targetContent = elem.data('id');
// 隐藏所有内容区域
$('.item-content').hide();
// 显示对应内容区域
$(`.${targetContent}`).show();

如果你更习惯用switch的写法，也可以改成这样：

$('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
elem.addClass('master-advanced-left-tab-active');

switch (elem.data('id')) {
 case 'item1': 
   $('.item-content').hide();
   $('.item1').show();
   break;
 case 'item2': 
   $('.item-content').hide();
   $('.item2').show();
   break;
 case 'item3':
   $('.item-content').hide();
   $('.item3').show();
   break;
 default:
   // 可选：默认显示第一个内容
   $('.item-content').hide();
   $('.item1').show();
}

完整的点击事件示例 #

把所有逻辑放在点击事件里，确保点击标签时触发：

$(document).ready(function() {
  $('.master-advanced-left-tab').click(function() {
    const elem = $(this);
    // 切换标签激活状态
    $('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
    elem.addClass('master-advanced-left-tab-active');
    
    // 切换内容显示
    const targetContent = elem.data('id');
    $('.item-content').hide();
    $(`.${targetContent}`).show();
  });
});

这样点击每个标签的时候，就会自动切换到对应的内容啦！逻辑很清晰，不需要依赖Bootstrap的组件，完全用你自己的结构就能实现。

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