jQuery リンクをクリックした時に文字の背景色を変更するサンプル

2022年10月20日

環境
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(“background-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 () {
    var color = $(this).attr("href");
    if( this == obj ){
       $(this).css("background-color","red");
     }else{
      $(this).css("background-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」をクリックすると、文字の背景色「赤」を変更します。
他のリンクの文字の背景色(緑)を変更します

jQuery

Posted by arkgame

関連記事: