Question

当用户点击btn并显示tab时，我需要找到一种方法来关闭可能已经在DOM中显示的任何tabs，最好是在褪色之前在新的tab。

中

我已经研究过使用if语句，但无法正确理解逻辑。

<a href="btn-1">Btn1</a>
<a href="btn-3">Btn2</a>

<div id="tab-1">Content1</div>
<div id="tab-3">Content2</div>




$("[href^='btn-']").on("click", function (e) {
    var $activeTab;
    e.preventDefault();
    $activeTab = '#tab-' + this.href.split('-')[1];
    $($activeTab).fadeToggle("fast");
});

http://jsfiddle.net/YMVxq/

我尝试在if语句中使用“：visible”，但没有得到正确的结果。

我考虑创建一个array并向该数组添加任何活动标签，然后每按一个新按钮弹出数组......听起来过于复杂。

Answer 1

使用siblings()隐藏其他可见的div

试试这个

$("[href^='btn-']").on("click", function (e) {
    var $activeTab;
    e.preventDefault();
    $activeTab = '#tab-' + this.href.split('-')[1];
    $($activeTab).fadeToggle("fast").siblings('div').hide();
});

DEMO

Answer 2

您可以使用 .siblings() 获取当前可见div的兄弟div并隐藏它：

$($activeTab).fadeToggle("fast").siblings('div').hide();

<强> Updated Fiddle

上面的代码应该有效，但是它会隐藏所有div元素，它是当前可见div的兄弟。最好只隐藏id以tab-开头的div：

$($activeTab).fadeToggle("fast").siblings('[id^="tab-"]').hide();

Updated Fiddle

Answer 3

您可以使用索引，但更好的方法是重新定义HTML标记以使用某些相关容器：

DEMO jsFiddle

$("[href^='btn-']").on("click", function (e) {
    e.preventDefault();
    var $activeTab = $('.content').eq($(this).index("[href^='btn-']"));
    $('.content').not($activeTab).slideUp('fast',function(){
        $activeTab.slideToggle("fast");
    });
});

在这里使用slideUp/slideToggle。您可以使用fadeOut/fadeToggle

Answer 4

简单解决方案
HTML 的

<a href="#tab1">Btn1</a>
<a href="#tab2">Btn2</a>

<div id="tab1">Content1</div>
<div id="tab2">Content2</div>

jQuery

$('a').click(function(){
    $('.active').hide().removeClass('active');
    $($(this).attr('href')).fadeIn('slow').addClass('active');
});

Working Fiddle

隐藏可见元素的策略

4 个答案: