时间戳

首页 > 解决方案 > jQuery 简单标签内容

jquery - jQuery 简单标签内容

问题描述

<a onclick="changeTab(1)">Tab 1</a>
<a onclick="changeTab(2)">Tab 2</a>
<a onclick="changeTab(3)">Tab 3</a>

<div class="tab1" style="display: block";>Tab 1 Content</div>
<div class="tab2" style="display: none";>Tab 2 Content</div>
<div class="tab3" style="display: none";>Tab 3 Content</div>

function changeTab(tabNumber) {
   $( ".tab"+tabNumber ).slideToogle( 300 );
}

大家好：）

我想实现一个简单的选项卡切换“小部件”。我有 3 个按钮（选项卡 1 - 3）和每个选项卡的内容。

选项卡 1 的内容将在开头显示 - 其他 2 个内容被隐藏。现在我想意识到我可以点击 Tab Button 2

=> 这应该隐藏活动选项卡内容并显示新选项卡内容。

但是我的代码目前不能像这样工作 - 我知道 - 但我不知道如何解决这个问题：/

标签： jqueryhtml

解决方案

您可以使用此代码隐藏可见的 div。

function changeTab(tabNumber) {
  $('div[class^=tab]:visible').not(".tab" + tabNumber).slideToggle(300)
  $(".tab" + tabNumber).slideToggle(300);
}

如果您在单击时不隐藏它，请使用：

function changeTab(tabNumber) {
  $('div[class^=tab]:visible').hide();
  $(".tab" + tabNumber).slideToggle(300);
}

演示

function changeTab(tabNumber) {
  $('div[class^=tab]:visible').not(".tab" + tabNumber).slideToggle(300)
  $(".tab" + tabNumber).slideToggle(300);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="changeTab(1)">Tab 1</a>
<a onclick="changeTab(2)">Tab 2</a>
<a onclick="changeTab(3)">Tab 3</a>

<div class="tab1" style="display: block" ;>Tab 1 Content</div>
<div class="tab2" style="display: none" ;>Tab 2 Content</div>
<div class="tab3" style="display: none" ;>Tab 3 Content</div>

推荐阅读