Как менять контент в зависимости от активной ссылки?

Question

Допустим у нас есть 3 ссылки одна из которых активная и отображает какой то контент (как то так)

Как сделать что б при нажатии на 2 ссылку она стала активной и поменялся контент? Я накостылял как то так. Но это прям очень дикие костыли, так-как я не понимаю как подгружать контент и менять активную ссылку. Подскажите пожалуйста как это можно реализовать

let links = document.querySelectorAll('.link')
let block1 = document.querySelector('.block-1')
let block2 = document.querySelector('.block-2')
let block3 = document.querySelector('.block-3')

links.forEach(link => {
    link.addEventListener('click', event => {
        let a = event.currentTarget.classList;
        if(a.contains('link-1')) {
            block1.classList.remove('hide') 
            block2.classList.add('hide') 
            block3.classList.add('hide') 
        } else if(a.contains('link-2')) {
            block1.classList.add('hide') 
            block2.classList.remove('hide') 
            block3.classList.add('hide') 
        } else if(a.contains('link-3')) {
            block1.classList.add('hide') 
            block2.classList.add('hide') 
            block3.classList.remove('hide') 
        }
    })
})

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #141414;
}

ul, li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #000;
}

.wrapper {
    display: flex;
    height: 100vh;
}

.aside {
    max-width: 10%;
    width: 100%;
    background-color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    margin-top: 20px;
}

.item:first-child {
    margin-top: 0;
}

.link {
    font-size: 24px;
}

.main {
    max-width: 90%;
    width: 100%;
    background-color: #000;
}

.block-1 {
    background-color: red;
    display: flex;
}

.block-2 {
    background-color: green;
    display: flex;
}

.block-3 {
    background-color: yellow;
    display: flex;
}

.block {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.hide {
    display: none;
}

<div class="wrapper">
        <aside class="aside">
            <nav>
                <ul class="list">
                    <li class="item">
                        <a href="#" class="link link-1">Первая</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link link-2">Вторая</a>
                    </li>
                    <li class="item">
                        <a href="#" class="link link-3">Третья</a>
                    </li>
                </ul>
            </nav>
        </aside>
        <main class="main">
            <div class="block block-1">1</div>
            <div class="block block-2 hide">2</div>
            <div class="block block-3 hide">3</div>
        </main>
    </div>

Answer 1

Простое переключение tab-ов, как я понял:

// Получение коллекций блоков и ссылок
let links = document.querySelectorAll('.link'),
  blocks = document.querySelectorAll('.block');
// Делегированный обработчик на меню навигации
document.querySelector('.list').addEventListener('click', fNavigation);
/* Функция переключения состояний блоков и ссылок */
function fNavigation(ev) {
  let oTarget = ev.target;
  if (oTarget.tagName == 'A') {
    links.forEach((link, i) => {
      blocks[i].classList.toggle('hide', (link != oTarget));
      link.classList.toggle('active', (link == oTarget));
      link.style.backgroundColor = (link == oTarget) ? getComputedStyle(blocks[i]).backgroundColor : '';
    });
  }
}
// Установка начальных активных блоков и ссылок
links[0].dispatchEvent(new Event("click", {"bubbles":true}));

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: #141414; }

.wrapper {
  display: flex;
  height: 100vh;
}

.aside {
  display: flex;
  justify-content: center; align-items: center;
  height: 100%; width: 100%;
  max-width: 10%;
  background-color: #fff;
}

ul, li { list-style-type: none; }

.item { margin-top: 20px; }
.item:first-child { margin-top: 0; }

a.link  {
  display: inline-block;
  text-decoration: none;
  font-size: 24px;
  color: #000;
  transform-origin: left center;
  transition: .3s ease-in;
}
a.active { transform: scale(1.5); box-shadow: 1px 2px 4px -1px black; }

.main {
  width: 100%;
  max-width: 90%;
  background-color: #000;
}

.block {
  display: flex;
  justify-content: center; align-items: center;
  height: 100%;
  font-size: 30px;
}

.block-1 { background-color: red; }
.block-2 { background-color: green; }
.block-3 { background-color: yellow; }

.hide { display: none; }

<div class="wrapper">
  <aside class="aside">
    <nav>
      <ul class="list">
        <li class="item">
          <a href="#" class="link active">Первая</a>
        </li>
        <li class="item">
          <a href="#" class="link">Вторая</a>
        </li>
        <li class="item">
          <a href="#" class="link">Третья</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="main">
    <div class="block block-1">1</div>
    <div class="block block-2 hide">2</div>
    <div class="block block-3 hide">3</div>
  </main>
</div>

БЛОГ НА HUSL

Как менять контент в зависимости от активной ссылки?

Ответы (1 шт):