1
resposta

Dúvida no " Conteudo extra : Data Attributes do HTML5 ".

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">&copy; 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)
}))

})()

1 resposta

Olá Pedro, tudo bem? Pelo que entendi, você está com dificuldades em reproduzir o mesmo funcionamento do projeto da professora utilizando Data Attributes do HTML5 em seu site.

Uma possível solução para o seu problema seria verificar se você está utilizando os mesmos nomes de classes e data attributes que foram utilizados no projeto da professora. Além disso, certifique-se de que o seu arquivo JavaScript está sendo importado corretamente no seu arquivo HTML.

Caso ainda esteja com dificuldades, seria interessante compartilhar mais informações sobre o problema que está enfrentando, como por exemplo, se está ocorrendo algum erro no console do navegador ou se o comportamento do seu site está diferente do esperado.

Ou então me dar as informações sobre o projeto original e explique o que está tendo de diferente do projeto original, e se possível um local onde eu possa encontrar o projeto original para comparar e lhe ajudar.

Aguardo seu retorno e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software