html - 我可以设置最后一个被点击的 的样式吗？

Question

基本上我有一个无序列表，可以跳转到页面的各个部分。我想要做的是当用户单击或向下滚动到有“名称”的特定部分时，<a href>通过 css 突出显示。这可能吗？下面的代码有望更有意义...

#left-nav {
  width: 14rem;
  float: left;
}
#left-nav ul li {
  background-color: #f8f8f8;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  color: #5c5c5c;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  margin: 0;
  outline: medium none;
  padding: 14px 0 14px 20px;
  text-decoration: none;
  width: 167px;
  list-style: none;
}
.page-content {
  width: 54rem;
  float: right;
  margin-top: -25px;
}

<div id="left-nav">
  <ul>
    <li><a href="#title1">title1</a>
    </li>
    <li><a href="#title2">title2</a>
    </li>
    <li><a href="#title3">title3</a>
    </li>

  </ul>
</div>

<a name="title1"></a>
<a name="title2"></a>
<a name="title3"></a>

Answer 1

纯 css 行不通，不行。

你可以这样做:
http://codepen.io/anon/pen/oXJxea

<div id="left-nav">
  <ul>
    <li onclick="highlightLi(this)"><a href="#title1">title1</a>
    </li>
    <li onclick="highlightLi(this)"><a href="#title2">title2</a>
    </li>
    <li onclick="highlightLi(this)"><a href="#title3">title3</a>
    </li>
  </ul>
</div>  

CSS:

#left-nav ul li[data-highlight="true"] {background-color: #550055;}

js:

function highlightLi(e) {
  var i=0;
  var parent_element = e.parentElement;
  while(parent_element.children[i]) {
    if (parent_element.children[i].tagName = "LI")
      parent_element.children[i].removeAttribute("data-highlight");
    i++;
  }
  e.setAttribute("data-highlight", "true");
}

我只有一个函数，它为被点击的元素设置一个属性，它有额外的 css 代码。
在设置属性之前，我们必须从所有兄弟元素中移除它，否则它们不会清除，因此我们循环遍历父元素 (

) 的子元素。有一些额外的安全性，因为 firefox 没有
• 子级。