The button 1 show your content1, how to interact with others? Boot 1 show content 1, boot 2 show content 2...Thank you very much!

Asked

Viewed 47 times

-1

let botao1 = document.getElementById('botao1');
let imagemcentro = document.getElementById('imagemcentro');
let conteudo1 = document.getElementById('conteudo_1');

botao1.addEventListener('click', function() {
    if (imagemcentro) {
        imagemcentro.style.display = 'none';
        conteudo1.classList.add('aparecer');
    } else {
        imagemcentro.style.display = 'flex';
    }
});
#imagemcentro {
    display: flex;
}

.conteudotodos {
    visibility: hidden;
}

.aparecer {
    visibility: visible;
}
<!DOCTYPE html>
<html>
    <head>
        <title>sub</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="block1">
            <div class="barramento">
                <button id="botao1">Saiba mais</button>
            </div>		
        </div>
        <div class="block2">
            <div class="barramento2">
                <button id="botao2">Saiba mais</button>
            </div>		
        </div>
        <div class="block3">
            <div class="barramento3">
                <button id="botao3">Saiba mais</button>
            </div>		
        </div>
        <!-- Conteudo -->
        <div class="centro">
            <div id="imagemcentro">
                <h1>IMAGEM</h1>
            </div>
            <div id="conteudo_1" class="conteudotodos">
                <div class="texto">
                    <h1>Exemplo1</h1>
                </div>
            </div>
            <div id="conteudo_2" class="conteudotodos">
                <div class="texto">
                    <h1>Exemplo2</h1>
                </div>
            </div>
            <div id="conteudo_3" class="conteudotodos">
                <div class="texto">
                    <h1>Exemplo3</h1>
                </div>
            </div>
            <script type="text/javascript" src="sub.js"></script>
    </body>
</html>

javascript

1 answer

0


For these cases where certain elements need to have the same behavior but maintaining a distinction between themselves, I recommend using the attribute date.

Date attributes-* allows us to store extra information in elements HTML standards and semantics without the need for hacks like classList, non-standard attributes, extra properties in the DOM or the method depreciated setUserData.

We can assign an attribute data to the button and set a value that will "point" to the div related, as the example below.

<button data-target="#div">Click</button>
<div id="div"></div>

You can define any name after the hyphen (data-*). I chose to target by bringing a meaning of "target", that is, the element that we want to interact by clicking the button.

Then your code can be as follows:

let botoes = document.querySelectorAll('button.mudar-conteudo'); // Buscar todo elemento "button" que tenha a classe "mudar-conteudo"
let imagemcentro = document.getElementById('imagemcentro');

for (let i = 0; i < botoes.length; i++) {
  botoes[i].addEventListener('click', function() {
    if (imagemcentro) {
      const divID = this.dataset.target; // Obtendo o valor do atributo data-target
      const div = document.querySelector(divID);

      imagemcentro.style.display = 'none';
      div.classList.add('aparecer');
    } else {
      imagemcentro.style.display = 'flex';
    }

  });
}
#imagemcentro {
  display: flex;
}

.conteudotodos {
  visibility: hidden;
}

.aparecer {
  visibility: visible;
}
<div class="block1">
  <div class="barramento">
    <button class="mudar-conteudo" data-target="#conteudo_1">Saiba mais</button>
  </div>
</div>
<div class="block2">
  <div class="barramento2">
    <button class="mudar-conteudo" data-target="#conteudo_2">Saiba mais</button>
  </div>
</div>
<div class="block3">
  <div class="barramento3">
    <button class="mudar-conteudo" data-target="#conteudo_3">Saiba mais</button>
  </div>
</div>

<!-- Conteudo -->

<div class="centro">
  <div id="imagemcentro">
    <h1>IMAGEM</h1>
  </div>

  <div id="conteudo_1" class="conteudotodos">
    <div class="texto">
      <h1>Exemplo1</h1>
    </div>
  </div>
  <div id="conteudo_2" class="conteudotodos">
    <div class="texto">
      <h1>Exemplo2</h1>
    </div>
  </div>
  <div id="conteudo_3" class="conteudotodos">
    <div class="texto">
      <h1>Exemplo3</h1>
    </div>
  </div>

  • Thank you very much for your explanation, it will help me a lot, just a question, when the content1 enters the image is replaced, for me to do in all the contents and appear only 1 content, always replacing the previous one, as could be done?

  • You can change the instruction div.classList.add('aparecer'); for div.classList.toggle('conteudotodos');. The function toggle will look in the element class if there is any value compatible with what was reported, if it is, it removes, if it is not, it adds.

  • 1

    Thank you very much!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.