1

ページの 1 つに、アクティブなタブに基づいて 3 つの異なる出力を切り替える小さなボックスを作成しています。ロード時に一番左のタブがアクティブになるように設定し、他のタブをクリックすると、このアクティブなタブが通常になり、クリックされたタブがアクティブになります。2 つのクラスを作成しました。1 つは呼び出さactiveBoxTabれboxTab、以下の jsfiddle でわかるように切り替えられます。私の問題は、デフォルトのアクティブとして設定されているタブはどれでも、別のタブをクリックすると役に立たなくなりますが、他の2つは前後にクリックできるということです。

http://jsfiddle.net/rxYB7/2/

HTML:

<div id="boxTabs">
    <p class="boxTab" id="deliveryTab">Tab 1</p>
    <p class="activeBoxTab" id="returnTab">Tab 2</p>
    <p class="boxTab" id="careTab">Tab 3</p>
</div>

JS:

$(document).ready(function () {
    $(".boxTab").click(function () {
        $(this).siblings(".activeBoxTab").attr('class', 'boxTab');
        $(this).attr('class', 'activeBoxTab');
        return false;
    });
});
4

3 に答える 3

2

イベント ハンドラーを class を持つ要素にバインドするだけboxTabです。しかし、あなたの HTML では、「selected」要素には class しかありませんactiveBoxTab。イベント ハンドラーはその要素にバインドされていないため、クリックしても何も起こりません。

boxTabクラスも与えるだけです：

<p class="activeBoxTab boxTab" id="returnTab">Tab 2</p>

イベントハンドラーを次のように変更します。

$(this).siblings('.activeBoxTab').removeClass('activeBoxTab');
$(this).addClass('activeBoxTab');
于 2013-05-29T10:38:34.527 に答える
0

最初activeBoxTabのクリック イベントはありません。それが機能していない理由です。boxTab activeBoxTabそのタブでイベントを処理するには、両方のクラスを追加する必要があります。activeBoxTab次に、クラスを削除または追加する必要があります。

<div id="boxTabs">
    <p class="boxTab" id="deliveryTab">Tab 1</p>
    <p class="boxTab activeBoxTab" id="returnTab">Tab 2</p>
    <p class="boxTab" id="careTab">Tab 3</p>
</div>
<div id="productInfoBox">
    <p class="activeBoxInfo" id="deliveryInfo"></p>
</div>

$(document).ready(function () {
    $(".boxTab").click(function () {
        $('.activeBoxTab').each(function(index, value) {
            $(value).removeClass('activeBoxTab');
        });
        $(this).addClass('activeBoxTab');

        return false;
    });
});

ワーキングデモ

于 2013-05-29T10:40:41.643 に答える
0

クリック ハンドラーを boxTab タブにバインドするだけで、元のアクティブなタブは boxTab ではありません。クリック ハンドラーを両方にバインドする必要があります。

$(document).ready(function () {
    $(".boxTab, .activeBoxTab").click(function () {
        $(this).siblings(".activeBoxTab").attr('class', 'boxTab');
        $(this).attr('class', 'activeBoxTab');
        return false;
    });
});

固定フィドル: http://jsfiddle.net/rxYB7/4/

ただし、これは、現在アクティブなタブを再度クリックしたときにクリック ハンドラーが起動することを意味します。回避したい場合は、クリック ハンドラーでチェックして中止するか、「.on」を使用してライブ イベント チェックを使用して、含まれる div 内のすべての要素の現在のクラスに基づいてクリック ハンドラーを動的に設定します。

于 2013-05-29T10:38:14.823 に答える