Проста JavaScript-навігація використовуючи хеш-частини адреси

Хеш(hash, решітка) - частина адреси(URL) після символу #.

Хеш-частина адреси

Сьогодні ми навчимося оброблювати його на стороні JS та зробимо невеличку навігацію, де будемо показувати користувачеві інформацію в залежності від вмісту хешу.

<div class="home page">
  <h2>Це головна сторінка</h2>
  <p>
    <a href="#about">Про нас</a> / <a href="#contact">Зв'язок</a>
  </p>
</div>

<div class="about page">
  <h2>Про нас</h2>
  <p>
    <a href="#home">Головна</a> / <a href="#contact">Зв'язок</a>
  </p>
</div>

<div class="contact page">
  <h2>Зв'язок</h2>
  <p>
    <a href="#home">Головна</a> / <a href="#about">Про нас</a>
  </p>
</div>

<div class="error page">
  <h2>Ти кудись не туди забрів...</h2>
  <p>
    <a href="#home">Головна</a> / <a href="#about">Про нас</a> / <a href="#contact">Зв'язок</a>
  </p>
</div>

Це наш основний html-код. Тут ми бачимо блоки .page які ми й будемо показувати, коли користувач натискатиме посилання. Замість того, щоб створювати декілька окремих файлів, ми зробимо один, який міститиме відразу всі сторінки, до яких можна буде звернутися за адресою index.html#page.

Також нам знадобиться трохи стилів:

.page { display: none; }

.page.visible { display: block; }

Видимі блоки тільки ті, що містять клас .visible, всі інші за замовчуванням будуть приховані. Й гадаю основну ідею ви зрозуміли - зчитуємо хеш-частину адреси та показуємо(додавши потрібному блоку клас .visible) запитувану сторінку.

Отримати хеш можна цією командою:

var hash = window.location.hash;

Отже, вже можемо щось написати:

function router() {

  // отримуємо хеш
  var hash = window.location.hash;

  // отримуємо всі блоки .page
  // видаляємо де є, клас .visible
  var pages = document.getElementsByClassName("page");
  for (var i = 0; i < pages.length; i++) {
    if ( pages[i].classList.contains("visible") ) pages[i].classList.remove("visible");
  }

  switch(hash) {

    // якщо хеш пустий або містить #home
    case "":
    case "#home":
      // показуємо блок .home
      document.querySelector(".home").className += " visible";
      break;

    case "#about":
      document.querySelector(".about").className += " visible";
      break;

    case "#cool":
      document.querySelector(".contact").className += " visible";
      break;

    default:
      document.querySelector(".error").className += " visible";
      break;

  }

}

Ця функція просто бере значення hash та порівнює його у switch. Якщо є збіг - показуємо потрібний блок, й звісно до цього не забуваємо приховати той що був показаний раніше(пробігаємося по всім .page, якщо містить клас .visible - прибираємо).

Тепер треба розібратися як саме викликати router(). Як мінімум, відразу після завантаження сторінки - це логічно:

window.onload = function() {
  router();
}

Все працює, от лише коли ми клікаємо на посилання, змінюється тільки URL, сторінка ж - ні. Тому нам треба ще причепити виклик функції до події, коли змінюється URL-адреса, а саме hash:

window.onhashchange = router;

Прослідкувати за цією подією нам допоможе window.onhashchange, де передаємо назву нашої функції.

Звичайно, що це найпростіший можливий приклад, але доволі корисний для того, щоб зрозуміти принцип та вже десь причепити.

До зустрічі.