Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #59 da revista programar. Faz já o download aqui!

l00ker

Abrir uma DIV

Mensagens Recomendadas

l00ker    0
l00ker

boas pessoas tenho uma pequena dúvidas..

gostava que ao carregar no 1 que é um link abrisse ou mostrasse uma div é possivel?

tenho o seguinte código:

<html>
<li><a href="#">1</li></a>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</html>

Editado por apocsantos
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
l00ker    0
l00ker

Não me funciona sempre este código, já o analisei e não encontro nenhum erro

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type= "text/css ">
div{
border: solid 2px;
width: 500px;
height: 300px;
}
</style>

<script>
function mostrar_abas(obj) {

 document.getElementById('div_aba1').style.display="none";
  document.getElementById('div_aba2').style.display="none";
  document.getElementById('div_aba3').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
  case 'mostra_aba3':
  document.getElementById('div_aba3').style.display="block";
  break
  }
}

</script>

<li><a style="cursor: pointer; cursor: hand;" onclick="mostrar_abas(this);" id="mostra_aba1" >aba1</a></li>

<li><a style="cursor: pointer; cursor: hand;" onclick="mostrar_abas(this);" id="mostra_aba2" >aba2</a></li>

<li><a style="cursor: pointer; cursor: hand;" onclick="mostrar_abas(this);" id="mostra_aba3" >aba3</a></li>

<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>
<div id="div_aba3" style="display:none;">
Conteúdo da aba 3
</div>
</html>

Editado por apocsantos
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
help    0
help

Pode usar jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
$(document).ready(function() {

$('.l').click(function(){
$('.d').hide();
$('#'+$(this).text()).show();
});

});
</script>

<style>
.d{display:none;}
</style>

<ul>
<li><a href="#" class="l">1</a></li>
<li><a href="#" class="l">2</a></li>
<li><a href="#" class="l">3</a></li>
</ul>

<div id="1" class="d">1</div>
<div id="2" class="d">2</div>
<div id="3" class="d">3</div>

Editado por apocsantos
geshi

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.