Jump to content
Fórum Script Brasil
  • 0

Abrir Um Div E Fechar Os Outros Divs


Marc_Dias
 Share

Question

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 to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 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 to comment
Share on other 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 to comment
Share on other 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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...