Question

我的HTML看起来像这样：

<div>
    <span> content </span>
</div>

当我点击span时，我会在其上获得一个:active伪类，以便我可以设置它的样式。我的问题是，当孩子为div时，我想为父:active设置样式。

有没有办法使用CSS（我不这么认为）或JavaScript？

在回答之前需要注意两点：

这个问题与此类似，只是这里的类不是普通的.active类，而是伪类:active。
提供的HTML只是示例HTML，我正在寻找一个通用的解决方案，它将适用于页面中的所有元素及其父级，当它们处于活动状态时，而不仅仅是这些特定项目。因此，具有$('span').click()调用的天真.parent()处理程序等解决方案理想情况下无法正常工作

Answer 1

您可以使用document.activeElement：

document.addEventListener("mousedown",function(){
    document.activeElement.parentElement.style.backgroundColor="red";
});

我注意到你没有包含jQuery标签，所以这是一个原生的JS方法。

编辑：有趣的是，这不起作用。出于您的目的，您只需使用：

document.addEventListener("mousedown",function(e){
    e.target.parentElement.style.backgroundColor="red";
});

document.addEventListener("mouseup",function(e){
    e.target.parentElement.style.backgroundColor="";
});

查看演示here。我将问一个关于这个的问题并回复你为什么前者不起作用。

Answer 2

这会查找页面中的所有跨度，并创建一个onclick事件，该事件将焦点放在其父节点上

var allSpans = document.getElementsByTagName('span');

for(var x = 0; x < allSpans.length; x++) {
    allSpans[x].parentNode.setAttribute('tabIndex',0); // this might not be required
    allSpans[x].onclick = function() {
        this.parentNode.focus();
    }
}

检查示例实现here

样式活动元素的父级

2 个答案: