jQuery简单选项卡内容
jQuery简单选项卡内容
提问于 2019-11-21 12:53:38
<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
=>，这应该隐藏活动选项卡内容，并显示新的选项卡内容。
但是我的密码现在不起作用了--我知道--但我不知道如何解决这个问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-11-21 12:58:23
您可以使用此代码隐藏可见的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>
Stack Overflow用户
发布于 2019-11-21 12:58:32
您可以将公共类作为tab添加到所有选项卡div中，并在调用changeTab()函数时隐藏所有选项卡div并显示相关的选项卡div。
注意:你对slideToggle有拼写错误，你用o代替g，请改正。
function changeTab(tabNumber) {
var $tabToSlide = $( ".tab"+tabNumber);
$( ".tab").not($tabToSlide).hide();
$tabToSlide.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="tab tab1" style="display: block";>Tab 1 Content</div>
<div class="tab tab2" style="display: none";>Tab 2 Content</div>
<div class="tab tab3" style="display: none";>Tab 3 Content</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58975562
复制相关文章
相似问题
腾讯云开发者
