Question

我希望在点击链接时更改文本块的背景颜色（由其他文本块包围）。

<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>

当我点击第2项＆lt;一个＆GT; element我希望Item 2 div的背景颜色改变以突出显示它。然后，如果我点击＆lt;一个＆GT;引用第1项的元素，第1项div背景颜色将改变，第2项背景颜色将返回原始（白色）。

最简单的方法是什么？我无法用CSS弄明白。

提前谢谢。

Answer 1

我建议，在兼容的浏览器中：

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

JS Fiddle demo

这在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 Fiddle demo

关键是要记住:target伪类的元素，在这种情况下它是div，而不是p（div的子元素{{1}}元素）。

参考文献：

单击另一个元素更改元素的样式

1 个答案: