Ir para conteúdo
Fórum Script Brasil
  • 0

Abrir Um Div E Fechar Os Outros Divs


Marc_Dias

Pergunta

boa tarde a todos estou com o seguinte problema e gostaria de ajuda

tenho varios divs no form

<div id="div1" style="display:none">
conteudo
</div>

<div id="div2" style="display:none">
conteudo
</div> 

<div id="div3" style="display:none">
conteudo
</div> 

Preciso de ajuda em uma função javascript que quando eu clicar em um link abra somente o div que preciso e feche
todos os outros

para chamar os divs diz uma lista

<ul>
<li><a href="java script:;" onclick="ExpandeDiv(1)">Principal</a></li>
<li><a href="java script:;" onclick="ExpandeDiv(2)">Sistemas</a></li>
<li><a href="java script:;" onclick="ExpandeDiv(3)">Sistemas</a></li>
<li><a href="java script:;" onclick="ExpandeDiv(4)">Sistemas</a></li>

</ul>

fiz essa função mais não está funcionando direito e nem sei se é o modo certo
<script>
function ExpandeDiv(valor)
{


if (valor = 1)
{
if (document.getElementById("div1").style.display == 'none')
{
document.getElementById("div1").style.display = 'block';
document.getElementById("div2").style.display = 'none';
}else
{
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
}
return false;
}

if (valor = 2)
{
alert(valor);
}

}
</script>

Lembrando que vou ter mais de 20(vinte) divs nessa função para abrir um e fechar os outros

Agradeço desde já a atenção dispensada

Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0

CSML, obrigado pela ajuda

coloquei sua função para rodar, quando clico no link ele "aparece" o div com o conteúdo, porém quando clico em outro

link ele coloca o outro div embaixo do primeiro, eu gostaria que um sumisse e só fica-se visivel o que eu acionei....

Use um loop, como:

var num_divs = 20; // define o número de divs a modificar
...
function ExpandeDiv(valor)
{
    for (i = 1; i <= num_divs; i++)
    {
        document.getElementById('div' + i).style.display = (i == valor ? 'block' : 'none');
    }
}
...

CSML, achei o problema , a sua função está corretissima, agradeço muito sua ajuda.

Link para o comentário
Compartilhar em outros sites

  • 0
<script>
function ExpandeDiv(id_cadastro)
{
var qtd_div = document.getElementsByTagName('div').length;
var div_sel = document.getElementById(id_cadastro);
var todas_divs;

for (var i = 1; i <= qtd_div; i++)
{
todas_divs = document.getElementById("div"+i);

if (todas_divs.id != id_cadastro)
	todas_divs.style.display = 'none';
else
	div_sel.style.display = 'block';
}
}
</script>

<a href="#" onclick="ExpandeDiv('div1')">Div1</a>
<a href="#" onclick="ExpandeDiv('div2')">Div2</a>
<a href="#" onclick="ExpandeDiv('div3')">Div3</a>

<br><br>
<div id="div1" style="display:none";><b>Div 1</b><br><br>
* Div 1
</div>
<div id="div2" style="display:none";><b>Div 2</b><br><br>
* Div 2
</div>
<div id="div3" style="display:none";><b>Div 3</b><br><br>
* Div 3
</div>

Link para o comentário
Compartilhar em outros sites

  • 0
Guest <Anonymous>

Assim é melhor:

<div id="divs" style="display: none">TESTE</div>
<div id="divs" style="display: none">TESTE</div>
<div id="divs" style="display: none">TESTE</div>
<div id="divs" style="display: none">TESTE</div>
<div id="divs" style="display: none">TESTE</div>

<!-- Primeiro div -->
<a href="#" onclick="openContent(0)">Teste 1</a><br>
<!-- Segundo div -->
<a href="#" onclick="openContent(1)">Teste 2</a><br>
<!-- Terceiro div -->
<a href="#" onclick="openContent(2)">Teste 3</a><br>
<!-- Quarto div -->
<a href="#" onclick="openContent(3)">Teste 4</a><br>
<!-- Quinto div -->
<a href="#" onclick="openContent(4)">Teste 5</a><br>


&lt;script>
function openContent(n){
for (x=0;x<document.getElementsByName('divs').length;x++){
document.getElementsByName('divs')[x].style.display = 'none'}
document.getElementsByName('divs')[n].style.display = 'inline'
}
</script>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...