Выделите связанный заголовок

Question

Как добавить CSS-класс "highlight" в заголовки или разделы на основе якорей типа "... this.html # headline1" (например, оглавления в Википедии).

Это также должно работать при переходе с другой страницы (href = "http://mysite.com/this.html#headline1"), а НЕ только при нажатии, как здесь: Выделить раздел # на странице - jQuery

Answer 1

В новых браузерах вы можете использовать псевдоселектор CSS3 :target .

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

Это не работает в IE 8 и ниже и не правильно в 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