html - 通过单击另一个元素更改元素的样式

Question

我想在单击链接时更改文本 block (被其他文本 block 包围)的背景颜色。

<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 元素时，我希望 Item 2 div 的背景颜色发生变化以突出显示它。然后，如果我单击引用元素 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 元素的子元素)。

引用资料:

• > Compatibility for :target pseudo-class .
• > :target pseudo-class .