33740


サイトのナビゲーションなどによくある、選択されている箇所に背景色を付けたいのですが、  
どのようにすれば良いのでしょうか？  
例えば以下の場合、会社案内をクリックしたとしたら、`<li>会社案内</li>`の背景色を赤色とかにしたいです。

[code]

    <ul class="nav">
      <li>会社案内</li>
      <li>製品一覧</li>
      <li>お問い合わせ</li>
    </ul>
    
[/code]


CC BY-SA 3.0
2017-04-03T05:45:52.483
33731
2017-04-03T07:46:07.697
12323
question
javascript html jquery css
サイトのナビゲーションで、選択されている箇所に背景色を付けたい。


クリックした時の動作をイベントハンドラとして登録しておく。

クリックした時の動作は、  
cssとして`background-color`を書き換えてもいいが、  
css は別に用意しておきクラス付け(例として`selected`とします）を変更することでcssを切り替える。  
現在選択されている(`class='selected'`になっている)要素からクラスを取り除く  
クリックした要素にクラス付けをする。

jQuery を利用した例：

[code]

    ul.nav li {
      background-color: transparent; /* default value */
    }
    ul.nav li.selected {
      background-color: red;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-04-03T07:46:07.697
33740
2017-04-03T07:46:07.697
5044
33731
answer