0

小提琴

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

  1. 创建选项卡式内容，其中只有第一个选项卡的内容 (.current加载页面时仅显示第一个选项卡的内容 ( )
  2. 创建一个“显示所有选项卡式内容”按钮 ( .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;
        }
4

2 回答 2

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">

在这里更新了小提琴。

于 2013-07-31T22:24:00.677 回答
0

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

<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属性show-all：

.show-all .tab-content {
  display: inherit;
}

更新小提琴

于 2013-07-31T22:15:02.050 回答