jQuery リンクをクリックする時に文字色を変えるサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
jQuery 3.6.0
構文
1.clickメソッド
$(“セレクター名 li a").click(function () {処理コード
2.$(“セレクター名 li a").each(function () {ulの複数要素に対して処理コード
3.文字の色を変える
$(this).css(“color",色の値);
リンク先の色を変えます
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#navi li a").click(function () { var obj = this; $("#navi li a").each(function () { if( this == obj ){ $(this).css("color","red"); }else{ $(this).css("color","green"); } }); }); }); </script> </head> <body> <ul id="navi"> <li><a href="#ABOUT">about</a></li> <li><a href="#RECRUIT">採用情報</a></li> <li><a href="#CONTACT">お問合せ</a></li> </ul> </body> </html>
結果
文字「about」をクリックすると、文字の色「赤」を変更します。
他のリンクの文字の色(緑)を変更します