1

これを理解するのに苦労しています。ページの上部に3つのタブがあります。ページの読み込み時に、それらは非表示になります。各タブにはコンテンツが含まれています。タブ1をクリックしてタブ1のコンテンツを表示したいのですが、タブ2をクリックすると、タブ2のコンテンツなどを表示したいのですが、それぞれのタブをもう一度クリックして、関連付けられたコンテンツを非表示にできるようにしたいのです。

つまり、私の希望する効果は、タブ1をクリックし、タブ1のコンテンツを表示し、タブ2をクリックし、タブ2のコンテンツを表示し、タブ2をもう一度クリックし、タブ2のコンテンツを非表示にすることです。現在使用しているコードを含めました。これにより、タブが正しく非表示になり、正しく展開されますが、アンカー要素をクリックした場合に各タブが希望どおりに切り替わることはありません。どんな助けでも大歓迎です。

$('.tabs').hide();
    $('ul.tabs li a').click(function () {
        $('.content').show();
});
4

3 に答える 3

2

タブ自体のクリックイベント内で、後続のクリックに対して次のようなことをしたいので、ACTIVEタブがクリックされたときに非表示/表示になります:

if ( $(this).hasClass("ui-state-active") ) {
    $(this).toggle();
}

(このソリューションは、jQuery UI タブを使用していることを前提としています。)

于 2012-04-26T00:19:22.643 に答える
1

HTML を見るまではわかりませんが、$('.content').toggle();動作するはずです。

于 2012-04-26T00:13:18.620 に答える
0

も使えます.toggle()

$('.tabs').hide();
$('ul.tabs li a').click(function () {
    $('.content').toggle();
});

ページの読み込み時にタブが非表示になっている場合は、これを CSSに配置display: none;してから、クリック イベントを使用する必要があります。

$('ul.tabs li a').click(function () {
    $('.content').toggle();
});

まだトグルの使用に問題がある場合は、各タブに一意の ID を作成してこれを行います。問題はクエリ内にあります。

$('ul.tabs li a').click(function() {
    $(this).toggle;
});

使用.contentすることで、子要素ではなく親要素をアクティブにします

于 2012-04-26T00:14:48.290 に答える