0

フィドル

2 つのイベントの発生を可能にする jQuery スクリプトを作成しようとしています。

  1. .currentページがロードされたときに 最初のタブのコンテンツ ( ) のみが表示される、タブ付きコンテンツを作成します。
  2. .toggle_tabsすべてのタブ付きコンテンツの表示を切り替える「すべてのタブ付きコンテンツを表示」ボタン ( ) を作成します。

コードは、各タブのコンテンツを正常にタブ化しています。問題はこれです：

  • ページをロードしてから をクリックすると、ページが最初にロードされたとき.toggle_tabsにクラスを持つ.currentタブは、コンテンツが表示されない唯一のタブです
  • ページを読み込むと、いずれかのタブを 1 回クリックしてから をクリック.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 に答える