Question

此html页面可能包含多个<p>元素。我希望改变移动用户触及的背景。如果用户触摸另一个，则之前触摸的段落将返回其原始背景颜色＆＃34;默认为白色＆＃34;。

我尝试了几个选择器无济于事。如何用CSS完成？感谢

修改
需要向用户显示2-3行数据，我为每组2-3行使用段落，因为我可以进行一些格式化以及显示不同的数据，如垂直列表。
所以我希望能够从＆＃34;列表中选择一个项目＆＃34;并应用与所选项目相关的其他行动。

.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").on("tap",function(){
    $('.add-color').removeClass('add-color');
    $(this).addClass('add-color');
});
```

Answer 2

如果你可以使用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中使用hacky方法来完成，例如在段落或类似内容上添加隐形复选框，但不能进入）

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

Answer 3

根据@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;
}

请参阅jsfiddle。

您可以详细了解tabindex here。

Answer 4

这可能是一种hacky方式，但您可以将:checked伪选择器与文本结合使用，以此来切换其选择的＃34;状态。

＆＃13;

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

＆＃13;

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

＆＃13;

这样做的好处是，您不依赖于JavaScript，而且它在各种设备和平台上应该非常稳定。

如果您有任何疑问或需要进一步澄清，请与我们联系！

触摸时改变p元素的背景颜色

4 个答案: