Question

我正在使用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');
    });

/* 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;
        }

Answer 1

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');
        }
    });
});

Answer 2

我们将选定的选项卡放在localStorage中，然后在我们的选项卡构造函数中执行此操作：

create: function( event, ui ) {
    // manage the use of "Display All" selection
    if (activeTab == "view_all") { // find value of activeTab before doing .tabs()
        // set all panels visible
        $('.ui-tabs-panel').show();
        // clear currently active tab's status
        ui.tab.removeClass('ui-tabs-active ui-state-active');
        // set state of "view all" tab control (list element) to selected
        $("#tabs ul>li").last().addClass('ui-tabs-active ui-state-active');
    }
    else {
        // un-select the 'view all' element
        $("#tabs ul>li").last().removeClass('ui-tabs-active ui-state-active');
    };
},

然后在激活方法中：

activate: function( event, ui ) {
    if (ui.newTab[0].hasAttribute("data-id") &&
        ui.newTab[0].getAttributeNode('data-id').value == "view_all") {
        // this is the "View All" tab, so show all panel sections
        $('.ui-tabs-panel').show();
        window.localStorage.setItem("#tabs-panel", "view_all");
    }
    else if (window.localStorage) {
        if (ui.newPanel) {
            // store panel by ID (or value of your choice)
            window.localStorage.setItem("#tabs-panel", ui.newPanel.attr('id'));
            // hide all panels except selected one (new for View All functionality)
            $(".ui-tabs-panel[id!='"+ui.newPanel.attr('id')+"']").hide();
        }
        else if (window.localStorage.getItem("#tabs-panel") == "view_all") {
            $('.ui-tabs-panel').show();
        }
    }
}

使用jQuery选项卡式内容：一次显示所有选项卡？

2 个答案: