2

Quero fazer um único botão que muda de nome e esconde a div1 e mostra a div2.

O button teria o nome div1 quando estivesse mostrando a div1 e o mesmo padrão para a div2.

    function mostrar_abas(obj) {

     document.getElementById('div_aba1').style.display="none";
      document.getElementById('div_aba2').style.display="none";

   switch (obj.id) {
      case 'mostra_aba1':
      document.getElementById('div_aba1').style.display="block";
      break
      case 'mostra_aba2':
      document.getElementById('div_aba2').style.display="block";
      break
   }
}

<a href="#" onclick="mostrar_abas(this);" id="mostra_aba1" >Mostra Aba 1</a> |
<a href="#" onclick="mostrar_abas(this);" id="mostra_aba2" >Mostra Aba 2</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

2 Respostas 2

2

Fiz duas opções, execute os códigos abaixo e veja funcionando.

Opção 1: fazer utilizando a propriedade text do botão:

function mostrar_abas(obj) {
   document.getElementById('div_aba1').style.display="none";
   document.getElementById('div_aba2').style.display="none";
  
  if(obj.text === 'Mostra Aba 1'){
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
      document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}
<a href="#" onclick="mostrar_abas(this);">Mostra Aba 1</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

Opção 2: fazer utilizando a propriedade css.display da aba:

function mostrar_abas(obj) {
   
  if(document.getElementById('div_aba1').style.display==="none"){
      document.getElementById('div_aba2').style.display="none";
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
    document.getElementById('div_aba1').style.display="none";
    document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}
<a href="#" onclick="mostrar_abas(this);">Mostra Aba 1</a> 
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

Opção 3: já começando visível:

function mostrar_abas(obj) {
   
  if(document.getElementById('div_aba1').style.display==="none"){
      document.getElementById('div_aba2').style.display="none";
      document.getElementById('div_aba1').style.display="block";
      obj.text = 'Mostra Aba 2';
  }else{
    document.getElementById('div_aba1').style.display="none";
    document.getElementById('div_aba2').style.display="block";
      obj.text = 'Mostra Aba 1';
  }
}
<a href="#" onclick="mostrar_abas(this);">Mostra Aba 2</a> 
<p></p>
<!-- abas -->
<div id="div_aba1">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>

5
  • Para que uma div já comece visível é só tirar o none?
    – João
    14/09/2016 às 23:49
  • Sim, só tirar o display:none do HTML da ABA. 15/09/2016 às 0:00
  • Deu certo os exemplos acima? Funcionou já começando visível? 15/09/2016 às 0:12
  • Lembra que para começar visível tem que alterar o nome inicial do botão. Fiz uma terceira opção e atualizei na resposta. 15/09/2016 às 0:14
  • Estava fazendo alguns testes e tudo deu certo, consegui entender perfeitamente agora, muito obrigado por explicar com 3 opções, ficou mais claro o entendimento!!
    – João
    15/09/2016 às 0:25
2

Tente um JavaScript assim

<script type="text/javascript">
function fechar_abrir(objeto) {
    if (document.getElementById(objeto).style.display == "none") {
        document.getElementById(objeto).style.display = "block";
    } else {
        document.getElementById(objeto).style.display = "none";
    }
}
</script>

A implementação seria algo mais ou menos assim (com um código meu), na primeira div, o id que está dentro da função fechar_abrir(), precisa ser o mesmo da div que você quer mostrar ou não.

echo '<div class="div_menu" onclick="fechar_abrir(\'menu_cliente\')" title="Clientes">'.
     '<img alt="Clientes" src="http://www.'.$_SESSION['p_url'].'img/users.png"  align="left" />'.'Clientes</div>
        <div class="div_item" id="menu_cliente" style="display:none;">'.$menu.'</div>';
1
  • O Allan já tinha respondido, mas obrigado por sua resposta também, teria me ajudado também
    – João
    15/09/2016 às 0:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .