jQuery サイトのナビゲーションで選択されたいる箇所に背景色を付ける方法

2023年4月25日

環境
jQuery 3.6.4
Windows 10 Home 64bit

書式
$(“ul.クラス名 li.selected").removeClass(“selected");
$(this).addClass(“selected");
選択されたいる箇所に背景色を付けます。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
  $(function(){
    $("ul.tabnav li").click(function(){
        $("ul.tabnav li.selected").removeClass("selected");
        $(this).addClass("selected");
    });
  });
</script>

<style>
 #tabnav{
  list-style: none;
 }
 ul.tabnav li {
    background-color: transparent; /* ディフォルト値 */
    text-align: center;
    display: inline-block;
}
ul.tabnav li.selected { /*項目選択*/
  background-color: #ffeced;
}
</style>
</head>
<body>

<ul class="tabnav">
  <li><a href="#">会社案内</a></li>
  <li><a href="#">製品一覧</a></li>
  <li><a href="#">お問い合わせ</a></li>
</ul>

</body>
</html>

結果
クリックした要素にクラス(背景色:#ffeced)付けをします

jQuery

Posted by arkgame

関連記事: