0

現在選択されているタブのコンテンツに css クラスを追加したいので、次のボタンをクリックすると、現在選択されているタブのコンテンツの css を変更する必要があります。

次のコードを試しましたが、機能しません。

 $("#tab-div").tabs();

    $(".next-tab").click(function () {

        var selected = $("#tab-div").tabs("option","selected");
        $("#tab-div").tabs("option", "selected", selected + 1);
        $(this).parent().removeClass("current");
        $(this).find("a").addClass("current");
        $(this).addClass("current");
     });

    $(".prev-tab").click(function () {
        var selected = $("#tab-div").tabs("option", "selected");
        $("#tab-div").tabs("option", "selected", selected - 1);
        $(this).parent().removeClass("current");
        $(this).find("a").addClass("current");
        $(this).addClass("current");

    });

HTML

<div class="prev-tab">
<a href="#" title="Previous">&nbsp;</a>
</div>
<div class="next-tab">
<a href="#" title="next">&nbsp;</a>
</div>    




 <div id="tab-div">
<ul class="nav">
<li><a href="#tab1" class="current">New Group</a></li>
<li><a href="#tab2">For Companies</a></li>
</ul>
<div id="tab1" class="current">
</div>
 <div id="tab2">
</div>

ありがとう、

4

1 に答える 1

0

編集: 気にしないで、投稿してから html をかなり変更しました。タブを設定するのは本当にお粗末な方法のようです - 私は完全に再考することを検討します. タブコンテンツdivの非表示/表示、選択/現在のクラスの設定/削除など、これらすべてを処理するタブクラスを設定する必要があります。 

$(".next-tab, .next-tab").on('click', function() {
    $('#tab-div a').removeClass("current");
    $(this).find("a").addClass("current");
 });

現在のクラスを、クリックしたクラスに変更します。ただし、これはタブを設定するための優れた方法とは思えません。また、詳細を知らずに .tabs() メソッドについてもわかりません。

于 2012-05-02T06:06:01.933 に答える