サイトのナビゲーションなどによくある、選択されている箇所に背景色を付けたいのですが、
どのようにすれば良いのでしょうか?
例えば以下の場合、会社案内をクリックしたとしたら、<li>会社案内</li>
の背景色を赤色とかにしたいです。
<ul class="nav">
<li>会社案内</li>
<li>製品一覧</li>
<li>お問い合わせ</li>
</ul>
クリックした時の動作をイベントハンドラとして登録しておく。
クリックした時の動作は、
cssとしてbackground-color
を書き換えてもいいが、
css は別に用意しておきクラス付け(例としてselected
とします)を変更することでcssを切り替える。
現在選択されている(class='selected'
になっている)要素からクラスを取り除く
クリックした要素にクラス付けをする。
jQuery を利用した例:
ul.nav li {
background-color: transparent; /* default value */
}
ul.nav li.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$("ul.nav li").click(function(){
$("ul.nav li.selected").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
<ul class="nav">
<li>会社案内</li>
<li>製品一覧</li>
<li>お問い合わせ</li>
</ul>
<li style="background-color:red">会社案内</li>
のようにすればいいかと思います。