Question

我正在尝试创建一个允许发生两个事件的jQuery脚本：

创建标签式内容，其中仅在加载页面时显示第一个标签的内容（.current）
创建一个“显示所有标签内容”按钮（.toggle_tabs），用于切换所有标签内容的可见性

代码成功标记每个标签的内容;问题是：

如果我加载页面，然后点击.toggle_tabs，则首次加载页面时包含类.current的标签页是唯一一个内容不可见的标签
如果我加载了该页面，请单击任意一个标签，然后点击.toggle_tabs，将显示所有标签内容。

如果点击.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');
        }
    });
});

/* 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 current" 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>

<div id="tab-2" class="tab-content" style="margin-top: 24px">
    <div class="tab-content-title">Job Info</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

我建议存储一个状态，以确定这些标签是否全部被切换，因为toggling正在执行此操作：

// The tabs are not toggling by default
var toggling = false;
$('#toggle_tabs').click(function () {
    if (toggling) {
        // If they are being toggled, remove the current class for all tabs except the one that is active
        $('.tab-content').each(function () {
            if (!$(this).hasClass('active')) {
                $(this).removeClass('current');
            }
        });

        toggling = false;
    } else {
        // If they aren't being toggled, add the current class for all tabs
        $('.tab-content').each(function () {
            $(this).addClass('current');
        });

        toggling = true;
    }
});

在HTML中，将active课程添加到您的第一个标签页。

<div id="tab-1" class="tab-content current active" style="margin-top: 24px">

Updated fiddle here.

Answer 2

理想情况下，切换按钮会显示所有内容，而不会影响各个标签的“已选定”状态。我建议将标签包装在一个容器中，并在该元素上切换一个类，而不是弄乱各个标签上的类：

<div id="hb_wrapper">
  <div id="tab-1">
     ...
  </div>
  ...
  <div id="tab-N">
    ...
  </div>
</div>

点击切换链接会切换show-all类：

$('#toggle_tabs').click(function () {
  $('#hb_wrapper').toggleClass('show-all');
});

在CSS中，您将覆盖display的{{1}}属性：

show-all

Updated Fiddle

切换“所有选项卡”时，选项卡式内容中的“当前”选项卡不会显示

2 个答案: