Javascript 如何使用JQuery显示自定义导航选项卡的内容？

我在JQuery中使用一个函数创建了自定义选项卡。这是我的自定义选项卡：

<div class="row">
    <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active">
        <p>Item 1</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 2</p>
    </div>
    <div class="col-4 master-advanced-left-tab">
        <p>Item 3</p>
    </div>
</div>

<div class="item1">
    Show content from item 1
</div>
<div class="item2">
    Show content from item 2
</div>
<div class="item3">
    Show content from item 3
</div>

这是我激活选项卡的功能（工作）

当我从选项卡切换时，我想显示类中的内容。我尝试了JQuery中的

toggle（）

函数。我还检查了这个stackoverflow帖子：

这是我想要的，但它不适用于我的解决方案，因为我不使用引导的导航选项卡

---

如何显示每个导航选项卡中的内容

要显示内容，只需对其调用

show（）

。您还可以通过将可单击的

div

元素转换为

a

并使用

href

属性来定位要显示的内容，从而使逻辑更加枯燥和可扩展。这就省去了编写无休止的

if

条件或

切换

案例的麻烦，因为它可以处理无限多的选项卡。这还意味着，如果需要，可以在页面通过URL片段加载时打开选项卡。试试这个：

let$tabs=$（'.tab内容'）；
让$triggers=$（'master advanced left tab'）。打开（'click'，函数（e）{
e、 预防默认值（）；
$triggers.removeClass（'master-advanced-left-tab-active'）；
var$elem=$（this.addClass（'master-advanced-left-tab-active'）；
$tabs.hide（）；
$tabs.filter（$elem.attr（'href'））.show（）；
});
$triggers.first（）.trigger（'click'）
.master高级左选项卡{
显示：块；
溢出：隐藏；
光标：指针；
垫底：10px；
填充顶部：10px；
}
.master高级左选项卡>p{
文本溢出：省略号；
高度：20px；
}
.主高级左选项卡处于活动状态{
颜色：#1C72DF；
边框底部：3px#1C72DF实心；
}
.选项卡内容{
显示：无；
}

显示项目1中的内容
显示项目2的内容
显示项目3中的内容
隐藏
和
显示
此方法可用于此目的，希望对您有所帮助
$（'.master advanced left tab'）。单击（函数（e）{
$（this）.addClass（'master-advanced-left-tab-active'）.sides（）.removeClass（'master-advanced-left-tab-active'））
var class1=$（this.attr（'data-id'））
$（'.'.+class1+''）.removeClass（'hide'）.Sides（）.addClass（'hide'））
})
.master高级左选项卡{
溢出：隐藏；
光标：指针；
垫底：10px；
填充顶部：10px；
}
.master高级左选项卡>p{
文本溢出：省略号；
高度：20px；
}
.主高级左选项卡处于活动状态{
颜色：#1C72DF；
边框底部：3px#1C72DF实心；
}
隐藏
{
显示：无；
}

项目1

项目2

项目3

显示项目1中的内容
显示项目2的内容
显示项目3中的内容
您可以看到我的代码：

<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="content-item item1 active">
    Show content from item 1
</div>
<div class="content-item item2">
    Show content from item 2
</div>
<div class="content-item item3">
    Show content from item 3
</div>

然后JS：

$('.master-advanced-left-tab').click(function (){
  let elem = $(this);
  $('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
  $('.content-item').removeClass('active');
  elem.addClass('master-advanced-left-tab-active');
  switch (elem.data('id')) {
      case 'item1':
        $('.item1').addClass('active')
        break;
      case 'item2':
        $('.item2').addClass('active')
        break;
      default:
        $('.item3').addClass('active')
  }
}) 

这是一个演示：
您可以使用响应性更强的软件，而不是swith：


功能更改选项卡（元素）{
//从项和选项卡中删除“活动”类以防止多个
//选项卡选择
$（'.master advanced left tab'）。removeClass（'active'）；
$（'.tab'）.removeClass（'active'）；
//将类“活动”添加到已单击的项目和适当的选项卡
//tab类取自html中项的“数据选项卡”属性
$（element.addClass（'active'）；
$（'.tab.'+$（元素）.data（'tab'））.addClass（'active'）；
}
//在初始化时将tab更改为first，以防止未选择任何选项卡
//您可以通过将类“active”添加到
//html中的“主高级左选项卡”和“选项卡”项
changeTab（$（'.master advanced left tab:first child'）；
//没什么好解释的
$（'.master advanced left tab'）。在（'click'，function（）上{
变更表（本）；
})
.master高级左选项卡{
溢出：隐藏；
光标：指针；
垫底：10px；
填充顶部：10px；
}
.master高级左选项卡>p{
文本溢出：省略号；
高度：20px；
}
/*已从激活的主高级左选项卡更改为缩短代码*/
.master-advanced-left-tab.激活{
颜色：#1C72DF；
边框底部：3px#1C72DF实心；
}
.标签{
身高：0；
溢出：隐藏；
}
.tab.active{
高度：自动；
}

项目1

项目2

项目3

显示项目1中的内容
显示项目2的内容
显示项目3中的内容
谢谢您抽出时间！我可以在没有
a
标签的情况下使用此解决方案吗？您可以，尽管我不会建议itAlright实施多个解决方案，看看什么是最好的。非常感谢您的宝贵时间！
<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="content-item item1 active">
    Show content from item 1
</div>
<div class="content-item item2">
    Show content from item 2
</div>
<div class="content-item item3">
    Show content from item 3
</div>

.content-item  {  
   display: none
}
.content-item.active  {
   display: block
}

$('.master-advanced-left-tab').click(function (){
  let elem = $(this);
  $('.master-advanced-left-tab').removeClass('master-advanced-left-tab-active');
  $('.content-item').removeClass('active');
  elem.addClass('master-advanced-left-tab-active');
  switch (elem.data('id')) {
      case 'item1':
        $('.item1').addClass('active')
        break;
      case 'item2':
        $('.item2').addClass('active')
        break;
      default:
        $('.item3').addClass('active')
  }
})