Question

Basically I have a unordered list which jump to sections of the page. What I want to do is when the user clicks or scrolls down to a particular section where there is a 'a name', the <a href> becomes highlighted via css. Is this possible? Code below which will hopefully make more sense...

#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

要突出显示已访问的链接，您需要使用:visited选择器。请注意，您需要先为a元素分配背景，以便background-color使用a:visited元素。

http://jsfiddle.net/fsxyeetd/

a:visited { background-color: rgb(255,0,255); }
a{background-color:white;}

如果您的网站有其他背景颜色，则可以使用继承而不是white。对于滚动，您将需要Javascript。

Answer 2

我认为WackyRacer8只想突出显示最后点击的链接。 Loli的例子展示了如何突出显示所有：访问过的链接。

这是一个类似的问题，有答案。也许它可以帮助你： How to set the last-clicked anchor to be a different color from all other links?

Answer 3

纯粹的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");
}

我只有一个函数为clicked元素设置一个属性，该元素有额外的css代码在设置属性之前，我们必须将其从所有兄弟中删除，否则它们不会清除，因此我们遍历父元素的子元素（＆lt; ul＆gt;）。有一些额外的安全性，因为firefox没有＆lt; li＆gt;那里的孩子们。

我可以设置最后<a name=""> that was clicked on?

3 个答案: