7

私はタブのようないくつかのアンカーを持っているプロジェクトに取り組んでおり、それぞれにいくつかの CSS クラスがあり、選択されたタブには個別の CSS クラスがあります。タブをクリックしていて、その CSS クラスを選択した CSS クラスに変更したい この機能は実行しましたが、以前に選択したタブにも同じクラスがあるという問題があります。以前に選択したタブを選択解除するにはどうすればよいですかクラス、以下は私のコードです

$(".btn").each(function ()
{
    $(this).click(function () {                              
        $(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");        
    });
});

<div class="course-Search-tabs">
    <a href="#" class="course-btn-tab-selected btn" id="a">A</a>
    <a href="#" class="course-btn-tab btn" id="b">B</a>
    <a href="#" class="course-btn-tab btn" id="c">C</a>
    <a href="#" class="course-btn-tab" id="d">D</a>
</div>
4

5 に答える 5

21

eachここでは、クラスを持つ要素の onclickを使用する必要はありません。btnクラスを持つすべての要素のクラスを削除し、目的のクラスをイベント ソースであるbtn現在の要素 ( ) に割り当てます。また、以前の要素から選択referred by $(this)したクラスを削除したいと思います。

$(".btn").click(function () { 
     if($(this).hasClass("course-btn-tab-selected"))
          $(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");               
     $(this).addClass("course-btn-tab-selected");        
});

編集:最後に選択した要素を保持し、必要に応じてクラスを変更することで、これを改善できます。

previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {       
     previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");                 
     $(this).addClass("course-btn-tab-selected");
     previouslyClicked = $(this);           
});
于 2013-01-08T10:19:39.140 に答える
3

の間違った使い方$.each()

次のように使用します。

$(".btn").click(function () {
    $(".btn").removeClass("course-btn-tab-selected");
    $(this).addClass("course-btn-tab-selected");        
});
于 2013-01-08T10:19:23.000 に答える
1

トリックを行う必要があります：

$(".btn").click(function () { 
        $(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');                 
        $(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");        

    });
于 2013-01-08T10:23:08.487 に答える
0

まず、jQuery セレクターを使用してクリック イベントを「btn」CSS クラスにバインドする必要があります。これにより、すべてのボタンを一度に操作できるようになります。

次に、前に選択したボタンを見つけて、選択したクラスを削除し、通常のクラスを追加します。

最後に、クリックしたボタンから通常のクラスを削除し、選択したクラスを追加します。

$('.btn').bind('click', function () {
    var previouslySelectedButton = $('.course-btn-tab-selected');
    var selectedButton = $(this);

    if (previouslySelectedButton)
        previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');

    selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});

別の方法として、HTML を使用した実際の例を次に示します: jsFiddle

于 2013-01-08T10:39:53.547 に答える
0

別の方法があります：

$(".btn").click(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
   $(this).addClass("course-btn-tab-selected");        
});
于 2013-01-08T10:41:00.657 に答える