javascript - 管理選択状態

Question

いくつ<ul>かのli要素を含む要素があります:

<ul id="ul">
  <li id="li1"></li>
  <li id="li2"></li>
  <li id="li3"></li>
</ul>

したい：

1. <li>クリックしたときに要素に「選択した」クラスを追加します
2. クリックしたばかりの<li>要素を除くすべての要素から、「選択された」クラスの属性をすべてクリアします。<li>

質問：

どうやってやるの？

Answer 1

途中で役立つサンプルです。jQuery を使用したサンプルについては、このフィドルを確認してください。純粋な JS バージョン (jQuery なし) については、ここをクリックしてください。

以下は、あなたが望むものを達成するためにあなたがしなければならないことです。

1. CSS クラスを作成し (例: selected)、それにルールを追加します (以下のように)。

CSS

.selected{
    background-color: black;
    color: white;
}

1. jQuery を使用して、要素のclickイベント ハンドラーを作成します。li
2. メソッドを使用して、要素がクリックされるたびにすべての要素からクラスremoveClass()を削除します。次に、メソッドを使用して、クリックされた要素にのみクラスを追加します。selectedliaddClass()selectedli

JS

$(document).ready(function(){
    $('#ul li').click(function(){
        $('#ul li').removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 2

ここにjsFiddleがあります

CSS

  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }

HTML

  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>

JS

    $("p").click(function () {
    $(".highlight").removeClass("highlight")
      $(this).toggleClass("highlight");
    });