Jquery em HTML5 - Show/hide div

Octàvio Luzio · August 10, 2012 at 04:53 PM

Boas

Estou com um problema com o meu show hide div em jquery sou novato nesta linguagem e gostaria muito que me ajudem a ressolver este problema.

Seguinte eu quero fazer que comece com id #Inicio quando entramos na pagina e que esconda os outros id ou seja que me mostre o conteudo do id #Inicio eu fiz este pequeno codico assim;

$(document).ready(function(){
 $("a").click(function(){
 var paginas= this.title;
 $('article').css('background','#000000');
 $('h1').css('background','#E68614');
 $("#"+paginas).show("slow").siblings().hide("slow");
if // o codico ate ao if funciona muito bem daqui para baixo esta o problema
 $(this).title('id') == #Inicio(){
 $(this).show(200);
 }
 else {
 $(this).hide(600);
 });
});

o codico esta aqui completo:

<!DOCTYPE html>

<html lang="pt-pt">


<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<link type="text/css" rel="stylesheet" href="style.css" media="screen" />

<script type="text/javascript" src="jquery.js"></script>

<title>Home Page</title>

<script type="text/javascript">

$(document).ready(function(){
 $("a").click(function(){
 var paginas= this.title;
 $('article').css('background','skyblue');
 $('h1').css('background','#E68614');
 $("#"+Inicio).show("slow").siblings().hide("slow");
if
 $(this).title('id') == #Inicio(){
 $(this).show(200);
 }
 else {
 $(this).hide(600);

 });
});

</script>

</head>

<body>

<header>
<nav>
<ul>
<li><a href="#" title="Inicio">Inicio</a></li>
<li><a href="#" title="Portfolio">Porfólio</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>
</header>



<div id="paginas">

<section>

<article id="Inicio" class="pagina"><h1>Inicio</h1></article>

<article id="Portfolio" class="pagina"><h1>Portfólio</h1></article>

<article id="Blog" class="pagina"><h1>Blog</h1></article>

<article id="Contato" class="pagina"><h1>Contato</h1></article>

</section>

</div>

</body>
</html>

agradeco que me ajudem Portugal a Programar

Edited August 10, 2012 at 05:30 PM by Octàvio Luzio

HappyHippyHippo · August 10, 2012 at 05:00 PM

mete o código dentro das tags do geshi

exemplo com espaços entra as tags para veres como se faz:

[ code=html4strict ]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

[ /code ]

isto sem espaços resulta em :

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Sign In

Jquery em HTML5 - Show/hide div

Recommended Posts

Octàvio Luzio

Link to comment

Share on other sites

HappyHippyHippo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information