0

Допустим у нас есть 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>

1
  • Почитайте про HTML5 History API. Вкратце: ставите обработчик события на смену URL, и обновляете HTML с нужными условиями.
    – user263906
    18 окт 2020 в 16:10

1 ответ 1

2

Простое переключение 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.