0

基本的に、作成しているタブ付きパネルがあります。ユーザーがタブをクリックすると、パネルが切り替わります。タブには、対応するパネルのクラスと同じクラスがあります。jQuery get（$ this）クラスを使用し、XXクラスのタブをクリックすると、XXクラスのすべてのDIVにクラス「.active」を追加します。

これが私のHTMLです：

<div class="bundle_panel">
    <div class="tab tXX">TITLE_HERE</div>
    <div class="panel tXX">CONTENT_HERE</div>
</div>

私はこのjQueryを効果なしで試しました：

$(".bundle_panel .tab").click(function(){
    var panelClass = $(this).attr("class");
    $(panelClass).addClass('active');
});

どんな助けでもいただければ幸いです。何か明確にする必要がある場合、または詳細情報を提供する必要がある場合は、お知らせください。

4

2 に答える 2

1

タブを実装するためのはるかに優れた方法はid、各「パネル」の属性を使用しidて、タブからそれらにリンクすることです。

<ul>
    <li><a href="#panel-1">Panel 1</a></li>
    <li><a href="#panel-2">Panel 2</a></li>
</ul>

<section id="panel-1">
    <h2>Panel 1</h2>
    <p>Content</p>
</section>

<section id="panel-2">
    <h2>Panel 2</h2>
    <p>Content</p>
</section>

次に、簡単に次のことができます。

$('ul.tabs a').click(function () {
    var target = $(this).attr('href');

    $(target).show();
});

編集：追加の利点は、JavaScriptがなくても意味があることです。

Edit2：コードの問題は、クラス名の前にドット（。）を付けずに、クラス名のみを選択しようとしたことでした。

$('.' + panelClass).addClass('active');
于 2012-04-06T15:52:00.540 に答える
1

この例の問題は、クリックすると「tabtXX」の値がpanelClass変数に割り当てられることです。次に、行$(panelClass).addClass('active');は、終了しない要素にアクティブなクラスを追加しようとしています。使用する場合：

$(".bundle_panel .tab").click(function(){
    var panelClass = $(this).attr("class").split(' ');
    $(".panel."+panelClass[1]).addClass('active');
});​

これにより、「panel」クラスとクリックされた要素の2番目のクラス（サンプルコードTXXを使用）を持つすべての要素にアクティブクラスが適用されます。jsFiddleの例。

于 2012-04-06T15:54:26.100 に答える