<header>
  <h2 class="title">hashchange</h2>
  <p class="description">Подія, яка спрацьовує при зміні фрагмента URL після решітки (#).</p>
</header>
<main>
  <div class="tabs">
    <button id="tab1" class="tab-button">Вкладка 1</button>
    <button id="tab2" class="tab-button">Вкладка 2</button>
    <button id="tab3" class="tab-button">Вкладка 3</button>
  </div>
  <div class="result">
    <h3 id="content-title">Виберіть вкладку</h3>
    <p id="content-text">Тут буде показаний контент вибраної вкладки.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.tabs {
  margin-bottom: 20px;
}

.tab-button {
  padding: 10px 15px;
  font-size: 16px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #eaeaea;
}

.tab-button:hover {
  background-color: #d8d8d8;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px rgba(118, 118, 118, 1);
}

h3 {
  margin-top: 0;
}

// Функція для оновлення контенту на основі хешу
function updateContent() {
  const hash = location.hash;

  const contentTitle = document.getElementById('content-title');
  const contentText = document.getElementById('content-text');

  switch (hash) {
    case '#tab1':
      contentTitle.textContent = 'Вкладка 1';
      contentText.textContent = 'Це контент для Вкладки 1.';
      break;
    case '#tab2':
      contentTitle.textContent = 'Вкладка 2';
      contentText.textContent = 'Це контент для Вкладки 2.';
      break;
    case '#tab3':
      contentTitle.textContent = 'Вкладка 3';
      contentText.textContent = 'Це контент для Вкладки 3.';
      break;
    default:
      contentTitle.textContent = 'Виберіть вкладку';
      contentText.textContent = 'Тут буде показаний контент вибраної вкладки.';
      break;
  }
}

// Прослуховування події hashchange
window.addEventListener('hashchange', updateContent);

// Налаштування кнопок для зміни хешу
document.getElementById('tab1').addEventListener('click', () => {
  location.hash = '#tab1';
});

document.getElementById('tab2').addEventListener('click', () => {
  location.hash = '#tab2';
});

document.getElementById('tab3').addEventListener('click', () => {
  location.hash = '#tab3';
});

// Оновлення контенту при першому завантаженні сторінки
updateContent();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.