Блог

Главная - Вопросы по программированию - Изменить CSS связанного div / id

Изменить CSS связанного div / id

#html #css

#HTML #css

Вопрос:

Я ссылаюсь на страницу, подобную page.html#id, поэтому страница автоматически фокусируется на этом идентификаторе.

Как мне сделать это в CSS, чтобы только div с идентификатором из URL-адреса получал, например, желтый фон?

Спасибо

Комментарии:

1. Вы имеете в виду, добавить стиль в зависимости от href="" ?!

Ответ №1:

Используйте :target псевдоселектор.

http://css-tricks.com/on-target/

Комментарии:

1. это потрясающе, не знал.

2. Спасибо, это сделало это. Мне просто нужно подождать 10 минут, прежде чем я смогу принять ответ.

Ответ №2:

Получите значение хэша и оформите его с помощью JavaScript:

 if(window.location.hash) {
    var hash = window.location.hash.substring(1); //the variable without hash sign.
    document.getElementById(hash).style.background = "yellow";
}

Комментарии:

1. документ. Выбор запросов (window. location.hash).style.background = «желтый»;

2. @Michael Это тоже хорошая идея, но убедитесь, что она несовместима с IE<8

3. @Michael IE<8 означает ниже Internet Explorer 8

Ответ №3:

Редактировать — не знал об :target этом . Этот ответ лучше!

Вы можете прослушать hashchange событие, определить текущий хэш и применить класс к соответствующему элементу:

 window.addEventListener('hashchange', function() {

  // Remove .active from any currently active elements
  var active = document.getElementsByClassName('active');
  for(var i = 0; i < active.length;   i) {
    active[i].classList.remove('active');
  }

  var id = window.location.hash.substr(1);
  document.getElementById(id).classList.add('active');
});

Если вам нужно поддерживать браузеры, которые не поддерживают classList, есть много альтернатив.

JSFiddle

Метки: