CSSアトリビュートセレクタを次のように設定します。

これが可能かどうかはわかりません。CSSアトリビュートセレクタを次のように設定します。

（JavaScriptを使用せずに）現在のターゲットに属性セレクタを動的に設定しようとしています。

このCSSような何か：

.tab[href=#:target] { 
    // styles here for active anchor tag 
}

（ジェイド構文で）HTMLは次のとおりです。言い換えれば

.tab-group 
    a.tab(href="#tabA") Tab A 
    a.tab(href="#tabB") Tab B 
    a.tab(href="#tabC") Tab C 

#tabA.target 
.tab-content 
    h2 Tab A 
#tabB.target 
.tab-content 
    h2 Tab B 
#tabC.target 
.tab-content 
    h2 Tab C

：（と現在のハッシュタグを設定したアンカーリンクを選択する方法純粋なCSS、ないJS）。

なぜですか？最も柔軟なhtml構造を可能にする:target疑似セレクタアプローチを使用するCSS専用タブの場合。

出典

2016-04-04 Isaac Gregson

これは、ターゲットが他の要素から完全に分離されており、あなたが確認できる文字列ではないため、非常に小さなJavaScriptなしでは機能しません。ですから、 'document.body.setAttribute（ 'data-url-target'、location.hash）'をJSの1行として提案し、 '[data-url-target ="＃... "]を使用します。可能なすべてのIDに対してスタイル選択ルールを作成します。 – somethinghere

これには、提案されたが落とされたidref結合子が必要です。属性セレクタは、記述した方法でパラメータ化することはできません。どんなCSSのみのアプローチでも、あなたのHTMLについての前提が必要であり、柔軟性をほとんど持たない。 – BoltClock

@BoltClock：非常に知っておくと便利です。それはあまりにも悪いです... JSなしでこれを行うことができるのは本当にうれしいです。 –

URL内のフラグメント識別子に関連する2つの異なる要素タイプがあります：URLが指すアンカー要素（URL内のハッシュと同じIDを持つもの）があります。現在のURLと同じURLを指します。

:targetはアンカー要素を選択します。

.tabSomething .content a[href$=#Something] { 
    // style for the links that lead to tab Something, because you know the hash is #Something for that tab 
}

：リンクを選択するために、あなたが事前にタブがわかっている場合、あなたはこのようなCSSルールを作成することができURLを取得するにはJavascriptを使用して、 $=#YOURHASH (ends with)

のようなセレクタのいくつかの並べ替えを使用する必要があります

出典

2016-04-04 11:34:40

CSSのみのアプローチを探しています...これはJSで簡単に達成できます。 –

@イサク・グレッグソン：そうではありません。 – BoltClock

'.tabSomething .content a [href $ = #Something]'は常に一致します。 OPは* iff *：targetと一致するselectorを探しています。 – BoltClock

CSSアトリビュートセレクタを次のように設定します。

答えて

関連する問題