Javascriptを変更するクラスonclick

Question

私はちょうどjavascript/ajax/jQueryでグリップを取得しようとしていますので、私のウェブサイトのチケットシステムを構築してください。

とにかく、ページ上部に表があります。

<table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black"> 
    <tr class="subtopic" style="font-size: 15px;"> 
     <td><a onClick="javascript: ShowNewTickets()">New Tickets</a></td> 
     <td><a onClick="javascript: ShowYourTickets()">Your Tickets</a></td> 
     <td><a onClick="javascript: ShowPuplicTickets()">Public Tickets</a></td> 
    </tr> 
</table> 

ページが読み込まれたら、「新規チケット」にクラスを「選択済み」にします。それらが選択されていないメニューの上にマウスを置くと、強調表示された効果があります。別のリンクをクリックすると、「選択された」クラスが他のTDから削除され、新しいTDに追加されます。

私はハイライト効果を行うためにonmouseoverとonmouseoutを試しましたが、すでに強調表示されているリンクになると、それは崩れます。

私もしようと試みてきた、

$('.off').live('mouseenter', function() { 
    if ($(this).hasClass('selected') == false) { 
     $(this).removeClass('off').addClass('highlighted'); 
    } 
}); 

しかし、それが強調表示さTDを保持します。

読んでいただきありがとうございます。

Answer 1

Sergio Tulentsevが述べたように、ハイライト効果を処理するには、疑似クラス:hoverを使用する必要があります。私は.liveまたは.delegate新しいjQueryの機能.on()の代わりに、.clickを、使用しています

$('.subtopic').on('click', 'a', function(e) { 
    $('.subtopic a').removeClass('selected'); // remove the class from all the links 
    $(this).addClass('selected'); // add it to the clicked link 
} 

注：「選択」クラスを処理するには、このような何かを行うことができます。 .on（）のやり方では、サブトピック行のリンクにのみイベントをバインドするようにします。 .on（）を使用すると、新しいリンクを動的にDOMに追加するときにもイベントが発生することが保証されます。

Answer 2

:hover pseudo-classを使用してください。

あなたのためにマウスのオーバー/アウトを処理します。

Answer 3

.toggleClass()を参照してください。名前が示すとおりです。