HTML/CSS：聚焦段落

我想單獨聚焦每個「p」標籤，當我點擊它時，就像在輸入上使用CSS「focus：」。問題是，選擇「焦點」不上段工作，這裏是個例：HTML/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;}

我怎樣才能找到一個替代解決方案，使其工作？

來源

2015-09-04 Lindow

您可以添加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>

來源

2015-09-04 14:23:35 Akshay

不錯！我不知道你能做到這一點。我正在建議一個JavaScript解決方案。 – Lance

真的很不錯的選擇，我不知道你可以做到這一點！但是，如果可能的話，我正在尋找一個JavaScript解決方案，因爲我在drupal 7上運行，而且我無法直接更改某些字段的類。 – Lindow

@Lance你可以發佈javascript解決方案嗎？:) – Lindow

下面是JavaScript的唯一版本：

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

 
\t 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>

來源

2015-09-04 15:09:02 Lance

你不應該使用'onclick'。 – klenium

@klenium這是爲什麼？ – Lance

http://stackoverflow.com/q/5871640 – klenium

HTML/CSS：聚焦段落

回答

相關問題