使用jQuery选项卡式内容：一次显示所有选项卡？ [英] Tabbed content using jQuery: Show all tabs at once?

问题描述

我使用jQuery将内容排列到多个选项卡中。目前，对于其预期用途，在单击选项卡时显示特定的< div> 非常有用。我如何能够创建一个可以切换显示所有标签内容的按钮？假设按钮如下所示：< div class =toggle>< / div>

当前代码：

  / * jQuery * / 
 
 $（'＃hb_container div'） .click（function（）{
 var tab_id = $（this）.attr（'data-tab'）; 
 $（'＃hb_container div'）。removeClass（'current'）; 
 $（'。tab-content'）。removeClass（'current'）; 
 $（this）.addClass（'current'）; 
 $（＃+ tab_id）.addClass 'current'）; 
}）; 
 
 / *标签* / 
 
< div id =hb_container> 
< div class =tab-link currentdata-tab =tab-1>< div class =tab-link-inner> Job< br> Info< / div>< ; / DIV> 
< div class =tab-linkdata-tab =tab-2>< div class =tab-link-inner> Asb.< br>通过< / div> < / DIV> 
< div class =tab-linkdata-tab =tab-3>< div class =tab-link-inner> Apl。< br> DIV>< / DIV> 
< div class =tab-linkdata-tab =tab-4>< div class =tab-link-inner> Struc。< br> Eng。< DIV>< / DIV> 
< / div> 
 
 / *标签内容* / 
 
 
< div class =tab-content-title>附件上传< / div> 
< div class =single_col_container> 
< div id =frm_field_ [id] _containerclass =frm_form_field form-field [required_class] [error_class]> 
 [输入] 
< / div> 
< / div> 
< / div> 
 
 / * CSS * / 
 
 #hb_container {
 margin：8px 0 8px 8px; 
 width：984px; 
 height：54px; 
} 
 .tab-content {
 display：none; 
} 
 
 .tab-content.current {
 display：inherit; 
} 
 
 .tab-link {
 background：＃222; 
颜色：#ddd; 
光标：指针; 
 float：left; 
 font-family：Roboto; 
 font-size：12px; 
 font-weight：bold; 
 letter-spacing：1px; 
 line-height：14px; 
 margin：0 8px 0 0; 
 width：54px！important; 
 height：54px; 
} 
 
 .tab-link：hover {
 background：＃181818; 
 color：＃ffcc00; 
} 
 
 .tab-link-inner {
 margin-top：11px; 
} 
  

解决方案

JSFIDDLE

$ b HTML

 < div id =hb_container> 
< div class =tab-link current activedata-tab =tab-1>< div class =tab-link-inner> Job< br> Info< / div> < / DIV> 
< div class =tab-linkdata-tab =tab-2>< div class =tab-link-inner> Asb.< br>通过< / div> < / DIV> 
< div class =tab-linkdata-tab =tab-3>< div class =tab-link-inner> Apl。< br> DIV>< / DIV> 
< div class =tab-linkdata-tab =tab-4>< div class =tab-link-inner> Struc。< br> Eng。< DIV>< / DIV> 
< / div> 
< input type =buttonvalue =切换所有标签页class =toggle_tabs/> 
  

jQuery
< $（$）$（$＃$）$（$＃$）$（$）$（$） b $ b $（'＃hb_container div'）。removeClass（'current'）;
$（'。tab-content'）。removeClass（'current'）。removeClass（'active'）;
$（this）.addClass（'current'）;
$（＃+ tab_id）.addClass（'current'）。addClass（'active'）;
}）; （$（$（$（$。
$（'。toggle_tabs'））。click（function（）{
$（'。tab-content'）。 hasClass（'current'））&&（$（this）.hasClass（'active'）=== false））{
$（this）.removeClass（'current'）;
} else {
$（this）.addClass（'current'）;
}
}）;
}）;

I'm using jQuery to arrange content into several tabs. Currently it works great for its intended purpose to show a specific <div> when a tab is clicked. How would I be able to create a button that could toggle "Show all tab content"? Let's say the button would look like this: <div class="toggle"></div>

Current code:

/* jQuery */

    $('#hb_container div').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('#hb_container div').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    });

/* Tabs */

    <div id="hb_container">
        <div class="tab-link current" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div>
        <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div>
        <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">Apl.<br>No.</div></div>
        <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">Struc.<br>Eng.</div></div>
    </div>

/* Tabbed content */

<div id="tab-1" class="tab-content" style="margin-top: 24px">
    <div class="tab-content-title">Attachment Upload</div>
    <div class="single_col_container">
        <div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    [input]
        </div>
    </div>
</div>

/* CSS */

#hb_container {
    margin: 8px 0 8px 8px;
    width: 984px;
    height: 54px;
}
    .tab-content {
        display: none;
    }

    .tab-content.current {
        display: inherit;
    }

    .tab-link {
        background: #222;
        color: #ddd;
        cursor: pointer;
        float: left;
        font-family: Roboto;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 1px;
        line-height: 14px;
        margin: 0 8px 0 0;
        width: 54px !important;
        height: 54px;
    }

        .tab-link:hover {
            background: #181818;
            color: #ffcc00;
        }

        .tab-link-inner {
            margin-top: 11px;
        }

解决方案

JSFIDDLE

HTML

    <div id="hb_container">
        <div class="tab-link current active" data-tab="tab-1"><div class="tab-link-inner">Job<br>Info</div></div>
        <div class="tab-link" data-tab="tab-2"><div class="tab-link-inner">Asb.<br>By</div></div>
        <div class="tab-link" data-tab="tab-3"><div class="tab-link-inner">Apl.<br>No.</div></div>
        <div class="tab-link" data-tab="tab-4"><div class="tab-link-inner">Struc.<br>Eng.</div></div>
    </div>
    <input type="button" value="Toggle All Tabs" class="toggle_tabs" />

jQuery

$('#hb_container div.tab-link').click(function () {
    var tab_id = $(this).data('tab');
    $('#hb_container div').removeClass('current');
    $('.tab-content').removeClass('current').removeClass('active');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current').addClass('active');
});
$('.toggle_tabs').click(function () {
    $('.tab-content').each(function () {
        if ( ($(this).hasClass('current')) && ( $(this).hasClass('active') === false) ) {
            $(this).removeClass('current');
        } else {
            $(this).addClass('current');
        }
    });
});

这篇关于使用jQuery选项卡式内容：一次显示所有选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！