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：聚焦段落

回答

相关问题