jQuery サイトのナビゲーションで選択されたいる箇所に背景色を付ける方法
環境
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)付けをします