Блог

У меня есть страница, на которой есть скрытый div. Этот div отображается на этой странице при нажатии определенной кнопки. Возможно ли создать ссылку (например, для вставки в электронное письмо), которая открывает эту страницу и показывает этот скрытый div? Спасибо

Редактировать

Возможно ли одновременно показывать один div и скрывать другие? Например:

 website.com/page.php#show
 

Эта ссылка выполняет свою работу. В то же время я могу заставить другие divs быть скрытыми?

Решение CSS

Определенно. С помощью CSS: target selector вы можете изменять стили элемента на основе значения хэша в URL. Посмотрите пример ниже. Он добавляет #show к URL-адресу, который делает скрытый div видимым. Это потому #show , что хэш соответствует id атрибуту в div. Таким образом, он знает, что он нацелен.

Если вы добавите в свою ссылку хэш, который соответствует значению id атрибута div на вашей странице, и добавите CSS к своим стилям, тогда вы сможете создать этот эффект.

 .hidden {
  display: none;
}

.hidden:target {
  display: block;
} 

 <a href="#first">Show the first div</a>
<a href="#second">Show the second div</a>
<a href="#third">Show the third div</a>

<div class="hidden" id="first">Excelsior!</div>
<div class="hidden" id="second">Tadaa!</div>
<div class="hidden" id="third">Shazam!</div> 

Дополнение: решение на JavaScript

Изменение видимости несвязанных элементов потребует помощи JavaScript. С его помощью мы можем определить, что любой другой div, на который не нацелен, должен быть скрыт из документа. Мы сделаем это, прочитав URL.

hash Свойство location объекта сообщит нам, имеет ли хэш значение или нет. Мы можем сравнить значение хэша с идентификатором выбранных нами элементов, чтобы определить, должны ли они отображаться или скрываться на основе хэша.

В приведенном ниже примере выбираются все элементы с class="js-target" помощью и проверяется, соответствует ли значение id каждого элемента hash значению. Если это так, он показывает этот элемент, если нет, он скрывает этот элемент. Это приведет к тому, что все несовпадающие элементы будут скрыты.

 // Selects all divs with the .js-target class.
const targets = document.querySelectorAll('div.js-target');

/**
 * Show the target that has an id that matches
 * with the hash value in the URL and hides the
 * ones that don't match.
 */
const toggleTargets = () => {
  const { hash } = window.location;
  if (hash === '') {
    return;
  }
  /**
   * Loop over each target and check if the id matches
   * the hash value. If it does, then remove the hidden 
   * class, if not, add the hidden class.
   */
  targets.forEach(target => {
    if (`#${target.id}` === hash) {
      target.classList.remove('hidden');
    } else {
      target.classList.add('hidden');
    }
  });
}

/**
 * Immediately execute the toggleTargets function when
 * the script is loaded.
 */
toggleTargets();

/**
 * Whenever the hash changes when on the page, call toggleTargets
 * again to re-evaluate if the hash matches any div.
 */
window.addEventListener('hashchange', toggleTargets); 

 .hidden {
  display: none;
} 

 <a href="#tadaa">Show the targeted div</a>

<div class="js-target">Excelsior!</div>
<div class="js-target hidden" id="tadaa">Tadaa!</div>
<div class="js-target">Shazam!</div>