0

私のHTMLは次のようになります。

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

をクリックすると、スタイルを設定できるように疑似クラスspanが取得されます。:active私の問題はdiv、子が:active.

CSS (そうは思わない) または JavaScript を使用してこれを行う方法はありますか?

答える前に注意すべき2つのポイント：

  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 に答える