Como posso ocultar uma div específica com javascript?

Filipe Inglat · 12 de abril de 2014

Olá!

Estou fazendo um site, e preciso fazer uma página que tenha alguns links que mudem o conteúdo de uma div. Achei um código Javascript que me ajudou a fazer algumas divs aparecerem ao clicar no devido link, mas ao clicar em um link e depois em outro, o primeiro continua a mostra acima do segundo. Agora preciso fazer com que, ao clicar em certo link, apenas a div desse link seja mostrada, e que as outras sejam ocultadas.

Segue abaixo código do Javascript, dos hrefs e das divs:

-------------javascript---------------

<script type="text/javascript">function toggle(obj) {var el = document.getElementById(obj);if ( el.style.display != 'none' ) {el.style.display = 'none';}else {el.style.display = '';}}</script>

-------------hrefs---------------

<a href="#" onclick="toggle('maisinfo');">Link1</a><a href="#" onclick="toggle('maisinfo2');">Link2</a><a href="#" onclick="toggle('maisinfo3');">Link3</a>

----------------divs---------------

div id="maisinfo" style="display:none">Conteúdos que ficarão escondidos</div><div id="maisinfo2" style="display:none">Conteúdos que ficarão escondidos2</div><div id="maisinfo3" style="display:none">Conteúdos que ficarão escondidos3</div>

----------------------------------------------------------------------------------------------------------

Alguém poderia me ajudar? Obrigado!

DiF · 12 de abril de 2014

Olá,

podes fazer desta maneira:

<div class="nav">    <ul id="menu">        <li id="link1"><a href="#" data-page="page1">Link 1</a></li>        <li id="link2"><a href="#" data-page="page2">Link 2</a></li>        <li id="link3"><a href="#" data-page="page3">Link 3</a></li>    </ul></div><div class="main">    <div id="page1" class="maisinfo">         Conteúdos que ficarão escondidos    </div>    <div id="page2" class="maisinfo">        Conteúdos que ficarão escondidos 2    </div>    <div id="page3" class="maisinfo">         Conteúdos que ficarão escondidos 3    </div></div>

Linhas 1 e 7, foi criado um elemento DIV para ser como um container do menu.

Linhas 2 e 6, foi inserido dentro do container o elemento UL

LInhas 3,4 e 5 foi inserido dentro do elemento UL, o elemento LI. Nestes LI foi usado um atributo nativo do HTML5 o, "custom data attribute". Onde o sufixo "page" foi definido.

Linhas 9 a 21, Basicamente a estrutura igual ao menu. Um DIV como container e mais DIV como filhos do container.

.maisinfo{ width: 350px; height: 100px; margin: 10px 10px; border: 1px solid #f00; text-align: center;}ul#menu{list-style: none; } ul li{margin:0 10px; display: inline;}

Estilização em CSS para os DIV's que possuem a classe .maisinfo

Estilização do menu.

$(document).ready(function() {    var curPage="";    $('.maisinfo').hide();    $("#menu a").click(function() {        if (curPage.length) {             $("#"+curPage).hide();        }        curPage = $(this).data("page");        $("#"+curPage).fadeIn("slow");    });});

Linhas 1 e 11, Carregamento do DOM. Depois de carregado, pode manipula-lo.

Linha 2, criada uma variável vazia "curPage" servirá para definir o link selecionado

Linha 3, Os DIV's são escondidos com a função hide(), é o mesmo que setar display: none no CSS.

Linhas 4 a 10, foi setado o evento de click para os elementos que contenham o atributo "a"

LInhas 5 a 7, Faz uma verificação da quantidade de "pages" e oculta todos.

Linha 8 seta para a variável curPage o atributo "data-page" atual clicado. para isto o $(this) foi utilizado

Linha 9, foi setado o efeito de fadeIn para o atributo atual clicado.

Veja funcionando

Filipe Inglat · 12 de abril de 2014

Muito obrigado Dif, é isso mesmo que eu quero,mas eu tentei fazer esse código funcionar aqui e não consegui...o que estou fazendo de errado? Segue código que tentei fazer aqui:

<html>  <head>  <script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript">  $(document).ready(function(){    var curPage="";    $('.maisinfo').hide();    $("#menu a").click(function(){       if (curPage.length){          $("#"+curPage).hide();       }       curPage = $(this).data("page");       $("#"+curPage).fadeIn("slow");    }); });</script><STYLE TYPE="text/css">.maisinfo{ width: 350px; height: 100px; margin: 10px 10px; border: 1px solid #f00; text-align: center;}ul#menu{list-style: none; } ul li{margin:0 10px; display: inline;}</STYLE></head><body><div class="nav">   <ul id="menu">     <li id="link1"><a href="#" data-page="page1">Link 1</a></li>     <li id="link2"><a href="#" data-page="page2">Link 2</a></li>     <li id="link3"><a href="#" data-page="page3">Link 3</a></li>   </ul></div><div class="main">   <div id="page1" class="maisinfo">     Conteúdos que ficarão escondidos   </div>   <div id="page2" class="maisinfo">     Conteúdos que ficarão escondidos 2   </div>   <div id="page3" class="maisinfo">    Conteúdos que ficarão escondidos 3   </div></div></body></html>

Obrigado!

DiF · 12 de abril de 2014

Olá,

Desculpe por não ter postado no momento, uma explicação do código. Contudo, já atualizei meu post e acrescentei uma explicação detalhada!

Então a respeito da sua tentativa, como mencionei no post #2, foi usado um atributo data nos LI's como ele é nativo do HTML5, no seu código faltou setar o <!DOCTYPE html>.. que é o que define que você estará utilizando atributos novos.

A princípio acho que pode ser isso.

Aguardo retorno