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 的背景颜色更改以突出显示它。然后，如果我单击引用 Item 1 的 <a> 元素，Item 1 的 div 背景颜色会发生变化，而 Item 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，而不是p（这是该元素的子div元素）。

参考：

于 2013-07-07T20:08:25.350 回答