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> 

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>