HTML/CSS:聚焦一个段落

Question

当我点击它时,我想分别关注每个"p"标签,就像输入上的CSS"焦点:"一样.问题是选择器"焦点"不适用于段落,这是一个例子:

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

如何找到替代解决方案才能使其正常工作？

Answer 1

您可以添加tabindex到p标记以实现此目的

#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>