突出显示链接标题

Question

如何根据“... this.html＃headline1”等锚点（例如维基百科上的TOC）向标题或部分添加CSS类“突出显示”。

当来自不同的页面（href =“http://mysite.com/this.html#headline1”）时，这也应该有效，而不仅仅是在这里点击：Highlight a # section in a page - jQuery

Answer 1

在较新的浏览器中，您可以使用CSS3 :target pseudo selector。

*:target {
     background-color: #F5FFE1;
}

This does not work in IE 8 and below and not correctly in Opera

Answer 2

检查window.location.hash并突出显示id，假设您的网页结构是这样的。

CSS

.highlight{ background-color :#FCFC9F; }

的jQuery

function highlight() {
  var hash = window.location.hash;

  if(hash) {
    $(hash).addClass('highlight');
  }
}

highlight(); // Do this on page load

$('a').on('click', highlight); // Do this on every `a` click