0

我的 HTML 如下所示：

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

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

有没有办法使用 CSS（我不这么认为）或 JavaScript 来做到这一点？

回答前需要注意两点：

  1. 这个问题与此类似，只是这里的类不是普通.active类，而是伪类:active。
  2. 提供的 HTML 只是示例 HTML，我正在寻找一个通用解决方案，该解决方案适用于页面中的所有元素及其活动时的父元素，而不仅仅是这些特定项目。所以像一个天真的$('span').click()处理程序这样的解决方案.parent()不会很理想地工作
4

2 回答 2

2

您可以使用 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="";
});

在此处查看演示。我要问一个关于这个的问题，然后回复你为什么前者不起作用。

于 2012-11-10T12:46:44.463 回答
0

这会找到页面中的所有跨度，并创建一个 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();
    }
}

在此处检查示例实现

于 2012-11-10T12:32:10.833 回答