我想在点击每个“p”标签时单独关注它,就像输入上的 CSS“焦点:”一样。问题是选择器“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;}
我如何才能找到替代解决方案使其发挥作用?
最佳答案
可以在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>
关于javascript - HTML/CSS : Focus a paragraph,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32400343/