0

これはcssだけで行うことができますか? ID1 リンクがアクティブなときに H1 を強調表示したい。

<a href=#id1>ID1</a>
<a href=#id1>ID2</a>
<h1 id="id1">This is the header</h1>
<h1 id="id2">This is the header</h1>

したがって、ID1 リンクがアクティブな場合、ID「id1」の H1 は赤ではなく青になります。

4

3 に答える 3

3

あなたは：targetでそれを行うことができます

CSSの：target疑似セレクターは、URLのハッシュと要素のIDが同じ場合に一致します。

<a href=#id1>ID1</a>
<a href=#id2>ID2</a>
<h1 id="id1">This is the header</h1>
<h1 id="id2">This is the header</h1>

およびcss

:target{
    color:red;

}

および結果

于 2013-03-07T11:26:51.447 に答える
2

上記の投稿は、ホバーで動作するため、もう 1 つ修正して正しいです。

JavaScriptを使用して、クリック後に要素に CLASS="active を追加します。 

h1.active{
   color:red;
   font-weight:bold
}

リンクをクリックすると、HTML に class="active" が含まれます。

<a id=a1 href=#id1 onclick="javascript:getElementById('id1').className='active'">ID1</a>
<a id=a2 href=#id1 onclick="javascript:getElementById('id2').className='active'">ID2</a>
<h1 id="id1" class="">This is the header</h1>
<h1 id="id2" class="">This is the header</h1>

これが役立つことを願っています:)

于 2013-03-07T11:55:20.703 に答える
-1

兄弟セレクター ( ~) を状態と組み合わせて使用​​できます:active。このフィドルに示されているように。

#id1-ref:active ~ #id1 {
    color: #FF0000;
}

#id2-ref:active ~ #id2 {
    color: #0000FF;
}

ただし、アンカー タグに追加の ID を追加する必要があります。

編集

ターゲットでそれを行う良い方法を見つけました。これはより良いかもしれません: http://jsfiddle.net/Wolfy87/5M8vV/2/

h1:target {
    color: #FF0000;
}

:targetセレクターに関する情報。

于 2013-03-07T10:14:37.503 に答える