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