Reproduzi o projeto que a professora desenvolveu e deu tudo certo, porém estava utilizando o mesmo funcionamento no meu site, e não conseguir obter o mesmo resultado, alguém pode ajudar?
<body>
<header>
<div class="cabecalho">
<div class="header__info">
<img src="./img/foto__de__perfil.jpg" alt="Foto de perfil de Pedro Henrique" class="header__img">
<div class="header__nomes">
<p class="header__nome">Pedro Henrique</p>
<p class="header__profissao">Desenvolvedor</p>
</div>
</div>
<nav class="header__nav">
<ul class="nav__lista">
<li class="nav__item"><a href="./index.html" class="nav__link" target="_blank">Home</a></li>
<li class="nav__item nav__atual">Projetos</li>
<li class="nav__item"><a href="https://www.instagram.com/pedro_h1104/" class="nav__link" target="_blank">Instagram</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="botoes">
<div class="lista__botoes">
<button class="botao__projetos ativa" data-botao="botao1">Nome1</button>
<button class="botao__projetos" data-botao="botao2">Nome2</button>
<button class="botao__projetos" data-botao="botao3">Nome3</button>
<button class="botao__projetos" data-botao="botao4">Nome4</button>
<button class="botao__projetos" data-botao="botao5">Nome5</button>
<button class="botao__projetos" data-botao="botao6">Nome6</button>
</div>
</div>
<div class="conteudos__item" data-conteudo="AluraBooks">
<h2 class="conteudo__titulo">Alura Books</h2>
<p class="conteudo__descricao">projeto que bla bla bla bla</p>
<img src="./img/aluraBooks.png" class="conteudo__img">
</div>
<div class="conteudos__item hide" data-conteudo="AluraLingua">
<h2 class="conteudo__titulo">Alura Lingua</h2>
<p class="conteudo__descricao">projeto que bla bla bla bla</p>
<img src="./img/aluraLingua.png" class="conteudo__img">
</div>
</main>
<footer>
<img class="rodape__img" src="./img/logo__footer.png">
<p class="copyright">© Copyright - Pedro Henrique - 2022</p>
</footer>
<script src="./js/main.js"></script>
</body>JAVA SCRIPT
(() => {
const botoes = document.querySelectorAll('[data-botao]')
esconderConteudos = () => {
const conteudos = document.querySelectorAll('[data-conteudo]')
conteudos.forEach(conteudo => conteudo.classList.add('hide'))
}
inativarBotoes = () => {
botoes.forEach(botao => botao.classList.remove('ativa'))
}
ativarConteudo = (valor) => {
const conteudo = document.querySelector(`[data-conteudo="${valor}"]`)
conteudo.classList.remove('hide')
}
ativarBotao = (botao) => {
botao.classList.add('ativa')
}
botoes.forEach(botao => botao.addEventListener('click', () => {
const valor = botao.dataset.botao
esconderConteudos()
inativarBotoes()
ativarConteudo(valor)
ativarBotao(botao)
}))})()
