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