0

リンクがクリックされたときに、テキスト ブロック (他のテキスト ブロックに囲まれている) の背景色を変更したいと考えています。

<div class="row">
  <div class="span3 offset1">
    <ul class="nav nav-list">
      <li><a href="#item1"> Item 1 </a></li>
      <li><a href="#item2"> Item 2</a></li>
    </ul>
  </div>

  <div class="span7 test-content">
    <div id="item1">
        <h4> Item 1 Header </h4>
        <p> Item 1 Text</p>
    </div>

    <div id="item2">
        <h4> Item 2 Header</h4>
    <p> Item 2 Text </p>
    </div>
  </div>    
</div>

Item 2 < a> 要素をクリックすると、Item 2 div の背景色を変更して強調表示したいと思います。次に、アイテム 1 を参照する < a> 要素をクリックすると、アイテム 1 の div の背景色が変わり、アイテム 2 の背景色が元の色 (白) に戻ります。

これを行う最も簡単な方法は何ですか? CSSではわかりません。

前もって感謝します。

4

1 に答える 1

0

準拠したブラウザでは、次のことをお勧めします。

p:target {
    background-color : #ffa; /* or whatever you'd prefer */
}

JS フィドルのデモ。

これは Internet Explorer でも可能ですが、残念ながら html の変更が必要になります。または、代わりに JavaScript を使用することもできます。

更新された投稿された HTML を参照して、上記を次のように変更します。

/* will highlight the 'div:target' itself: */
div:target {
    background-color: #f90;
}

/* will highlight the descendant 'p' element(s) of the 'div:target': */
div:target p {
    background-color : #ffa;
}

JS フィドルのデモ。

:target重要なのは、どの要素が疑似クラスを取るかを覚えておくことです。この場合、それは (その要素の子である)divではなく、です。pdiv

参考文献:

于 2013-07-07T20:08:25.350 に答える