HTML/CSS: 如何让段落获得焦点

Question

当我单击每个“p”标签时，我希望能够将其单独聚焦，就像在输入框上使用CSS“focus：”一样。问题在于选择器“focus”不适用于段落，这里是一个例子：

HTML

<div id="myDiv">
    <p>Some Content 1</p>
    <p>Some Content 2</p>
    <p>Some Content 3</p>
    <p>Some Content 4</p>
</div> 

CSS

：层叠样式表。

#myDiv p:focus {background-color:red;}

我该如何寻找替代方案以使其正常工作？

- Hiroyuki Nuri

Answer 1

你可以给 p 标签添加 tabindex 属性来实现这一点。

#myDiv p:focus {
    background-color:red;
}

<div id="myDiv">
    <p tabindex="0">Some Content 1</p>
    <p tabindex="0">Some Content 2</p>
    <p tabindex="0">Some Content 3</p>
    <p tabindex="0">Some Content 4</p>
</div>

Jquery的解决方案将是：

click = false;
$(document).click(function(e) {
  if(!($(e.target).is('p'))) {
    $('p').css('background', 'transparent')
  }
})
$('p').click(function() {
    $('p').css('background', 'transparent');
    $(this).css('background', 'red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="myDiv">
  <p>Some Content 1</p>
  <p>Some Content 2</p>
  <p>Some Content 3</p>
  <p>Some Content 4</p>
</div>

- Akshay

---

不错！我不知道你可以这样做。我本来想建议一个JavaScript解决方案。 - Lance

如果您熟悉jQuery，我可以给您一个答案 @Sia - Akshay

我在纯JS脚本方面遇到了麻烦。由于某些愚蠢的原因，getElementsByTagName不起作用。如果我解决了，我会发布出来的。 - Lance

是的，我确定我错过了某些愚蠢的东西。我试图让集合循环遍历并重置所有背景，然后将最近点击的背景设为红色。如果没有这个，它们都会保持在“聚焦”颜色中。 - Lance

太好了，@Lance，你还可以为body添加一个点击事件，这样当你点击body时，背景也会消失。 - Akshay

Answer 2

这是一个仅使用JavaScript的版本：

function highlight(theP)
{
 var x = document.getElementsByTagName("p");
 var i;
 for (i = 0; i < x.length; i++)
 {
  x[i].style.background = "";
 }

 theP.style.backgroundColor = "red";
}

<div id="myDiv">
    <p onclick="highlight(this);">Some Content 1</p>
    <p onclick="highlight(this);">Some Content 2</p>
    <p onclick="highlight(this);">Some Content 3</p>
    <p onclick="highlight(this);">Some Content 4</p>
</div>

- Lance

---

不应该使用 onclick。 - klenium

@klenium 为什么？ - Lance