タッチ時にp要素の背景色を変更する

Question

このhtmlページには複数の<p>要素が含まれている場合があります。私は、モバイルユーザーが触れるものの背景を変更したいと思います。そして、ユーザが別のものに触れると、以前にタッチされた段落は元の背景色「デフォルト白」に戻る。

無駄なセレクタはほとんど試してみませんでした。どのようにCSSでそれを行うことができますか？おかげ

編集
私は同様のフォーマットのビットを行うことができるので、ユーザに表示する必要のあるデータの2-3ラインがありますが、私は、2〜3行のグループごとに段落を使用垂直方向のリストのような異なるデータを示しています。
"リスト"からアイテムを選択し、選択したアイテムに関連する他のアクションを適用できるようにします。

.selectable:focus { 
    background-color: lightgray; 
} 

<template name="myName"> 
    <p class="selectable"><b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}</p> 
</template> 

Answer 1

：

<p class="selectable" tabindex="0"> Paragraph 1 </p> 
<p class="selectable" tabindex="0"> Paragraph 2 </p> 
<p class="selectable" tabindex="0"> Paragraph 3 </p> 
<p class="selectable" tabindex="0"> Paragraph 4 </p> 

.selectable:focus { 
    background-color: lightgray; 
} 

はjsfiddleを参照してください。

tabindex hereについて詳しく知ることができます。

Answer 2

• この場合には、あなたが
• はあなたが
は、あなたが望む機能を追加したい要素にリスナーを適用したいイベントのリスナーを追加します。クラスを追加します背景色を与える（そして前の要素の色を削除する）。

$("p").on("tap",function(){ 
    $('.add-color').removeClass('add-color'); 
    $(this).addClass('add-color'); 
}); 

Answer 3

あなたはjQueryのを使用できる場合は、このようにそれを行うことができます。

のjQuery：

$("p.selectable").click(function(){ 
    $("p.selectable").removeClass("clicked"); 
    $(this).addClass("clicked"); 
}) 

CSS：

p.selectable { 
    background:white; 
    height:100px; 
} 
p.selectable.clicked { 
    background: red; 
} 

このjsfiddleを参照してください。 CSSだけでは難しいです。 CSSはフォーマットを変更するためのものです。アクションをトリガーする場合は、javascriptを使用します。 （これは、段落などの上に目に見えないチェックボックスを追加するなどのCSSのハッキリメソッドで行うことができますが、それに入ることはできません）

EDIT：明らかに@CBroeとしてadding a tabindexで実現することもできます。ニートトリック:)しかし、段落がクリックされたときにより多くのアクションをトリガーしたい場合は、javascriptのアプローチを使用してください。スタイルを変更したいだけの場合は、このCSSだけを使うことができます。 @CBroeの提案に続いて、次の操作を行うことができ

Answer 4

これはやっかいな方法ですが、テキストと組み合わせて:checked疑似セレクタを使用して、「選択した」状態を切り替えることができます。

.selectable { 
 
    display: none; 
 
} 
 

 
.selectable:checked + label { 
 
    color: red; 
 
}

<input type="checkbox" id="unique-id" class="selectable"> 
 
<label for="unique-id"> 
 
    <b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}} 
 
</label>

これまでの利益は、JavaScriptに依存していないと、それは、様々なデバイスやプラットフォーム間でかなり安定していなければならないということです。

ご不明な点がありましたら、ご遠慮なくお知らせください。