0

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

<ul class="nav">
  <li>会社案内</li>
  <li>製品一覧</li>
  <li>お問い合わせ</li>
</ul>
3
  • 2
    「選択されている」とは、「マウスカーソルが載っている」とか「一度クリックした」とか具体的にどういう状況を指しますか?。あるいは「会社案内ページが表示されているときは会社案内メニューに色がついている」といった動きにしたいのでしょうか。
    – unarist
    Commented 2017年4月3日 6:06
  • コメント頂きありがとうございます。やりたいのは「会社案内ページが表示されているときは会社案内メニューに色がついている」状態にしたいです。
    – poplot726
    Commented 2017年4月3日 7:41
  • 1
    それぞれのページが別々に用意されているのならばクリックでページが切り替わるようにリンクを作成しておきそのページで<li style="background-color:red">会社案内</li>のようにすればいいかと思います。
    – BLUEPIXY
    Commented 2017年4月3日 7:44

1 件の回答 1

1

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

クリックした時の動作は、
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>

4
  • ありがとうございます!教えていただいたことを実行したら、やりたかったことができました。本当にありがとうございました。
    – poplot726
    Commented 2017年4月3日 8:29
  • 本件は教えて頂き誠にありがとうございました。大変申し訳ありませんが、テキストの色を変えるやり方もアドバイス頂けると助かります。何卒宜しくお願い致します。ja.stackoverflow.com/questions/33744/…
    – poplot726
    Commented 2017年4月3日 10:34
  • 1
    @poplot726 テキストの場合はcolor: blue; のようにcss で color を指定します。リンクの場合はリンクの状態それぞれについて指定します。 参考
    – BLUEPIXY
    Commented 2017年4月3日 10:40
  • ありがとうございます!colorに変更したらできました。 お手数おかけしました。m(_ _)m
    – poplot726
    Commented 2017年4月3日 11:44

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。