触摸时改变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

按照@CBroe的建议，您可以执行以下操作：

<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;
}

见小提琴。

您可以了解有关tabindex 这里的更多信息。

Answer 2

• 为所需事件添加侦听器
• 将侦听器应用于所需的元素。
• 添加您想要的功能，在本例中:添加一个类以提供背景颜色(并移除前一个元素的颜色)。 $(“p”).on(“抽头”，函数(){$(‘.add-color’).removeClass(‘add’)；$(This).addClass(‘add’)；}；

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;
}

看这个小提琴。这是很难做的只有CSS。CSS是用来更改格式的。如果要触发操作，请使用javascript。(这可以通过CSS中的hacky方法来完成，比如在段落或其他内容上添加一个无效复选框，但不要进入)

编辑:正如@CBroe建议的那样，显然也可以通过tabindex来实现。但是，如果您想在单击段落时触发更多的操作，请使用javascript方法。如果您只想更改样式，则可以使用此CSS仅限技巧。