レッスンに戻る

選択可能リスト

importance: 5

ファイルマネージャのように、要素が選択可能なリストを作成します。

  • リスト要素をクリックすると、その要素のみが選択され(クラス.selectedが追加されます)、他の要素はすべて選択解除されます。
  • Ctrl(Macの場合はCmd)を押しながらクリックすると、要素の選択が切り替わりますが、他の要素は変更されません。

デモ

追伸:このタスクでは、リスト項目にテキストのみが含まれていると仮定できます。入れ子になったタグはありません。

追伸:クリック時にブラウザによるテキストのネイティブ選択を防止します。

タスクのサンドボックスを開く。