onClickを使用してJavaScriptを使用したクラスを変更する

Question

私はマウスオーバーやマウスアウト時に各liのパディングと色のプロパティをアニメーション化するメニューを作成していますので、リンクのクラスを変更してアニメーションや色の変更を止めたいと思っていました。これまでは、アニメーションにa.inactiveを付けるように割り当てていて、onclickイベントを通じてa.activeにクラスを変更したかったのです。これまでのところ、私はこのサイトでいくつかの役立つリソースを見つけました。

$("#menu li a").click(function(){ 
if (!$(this).hasClass("inactive")) { 
$("a.inactive").removeClass("inactive"); 
$(this).addClass("active"); 
} 
}); 

上記のコードは、チケットのようですが、JavaScriptの合計noobのこと、私はトラブルのonClickを介して実行することができ、それのアウト機能を作成を抱えています。ここにhtmlがあります：

<ul id="menu"> 
       <li class="landscape-architecture"><a class="inactive" href="#project1" onclick="changeClass();"><span class="menu_year">2006/</span>AQUEOUS PLAN</a></li> 

ご協力いただければ幸いです。ありがとう！

EDIT - 以下に提供されているコードはすべて動作するはずですが、マウスオーバー/マウスオーバーのアニメーションのコードを入れて矛盾があるかどうかを確認します：

$('#menu li').click(function() { 
    window.location = $(this).find('a').attr('href') 

}).mouseover(function(){ 

    $(this).find('a.inactive') 
    .animate({ paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 }) 
    .animate({ backgroundColor: colorOver }, { queue:false, duration:200 }); 

}).mouseout(function() { 

    $(this).find('a.inactive') 
    .animate({ paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 }) 
    .animate({ backgroundColor: colorOut }, { queue:false, duration:200 }); 

}); 

Answer 1

上記のコードはどれですか？あなたのファイルにjQueryライブラリがロードされていると仮定して、2行目を次のように変更した後：

if ($(this).hasClass("inactive")) { 

うまくいくようです！指定した<a>要素がクリックされると、そこにある機能が実行されます。 HTMLのonclick要素は必要ありません。

あなたはonclickの要素を利用して他の場所で使用することができるかもしれ機能にあなたの現在のコードを有効にするかしかし、あなたのような何かを行うことができれば：

function change_class() { 
    if ($(this).hasClass("inactive")) { 
     $(this).removeClass("inactive").addClass("active"); 
    } 
}); 

をそして、あなたのHTMLにonclick="change_class()"を使用。

ここでテストするJSFiddleです：http://jsfiddle.net/TVms6/

Answer 2

これは、これらの日のものを行うための推奨方法ではありません。このhttp://api.jquery.com/toggleClass/

$("#menu li a").click(function(){ 
    $(this).toggleClass('inactive') 
}); 

Answer 3

をチェックしてください。 onclick（）はあなたのために働きますが、最近JavaScriptを使用している傾向がある、目立たないポリシーにはあまり適していません。 Wikipediaの説明を読んでください。あなたがやるべきことは何

は、あなたが簡単にそれをターゲットすることができるようにあなたのアンカータグにIDを割り当てることができます

$('selector').click(function(){ 
//the action that you want to perform 
}); 

のようなものです。

私の意見では、自分自身を学び始めている間に正しい方法を学ぶことが最善であり、そのように早くから習慣が増していくということです。