Menu css e abas Ativas
Olá pessoal!
Vocês sabem como posso capturar o ultimo clique em alguma aba e deixar ele ativa mesmo atualizando a página (como se fosse sessão).
outra coisa .. queria começar já com a primeira aba ativada com seu respectivos conteúdos....
desde já obrigadooooo !!!!
Abs pessoal
eis o código ; )
<!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88859-1" />
<title>Navegacao em abas com CSS - Sem javascript</title>
<style type="text/css">
h1{
font: normal 25px Georgia, verdana;
color: #336699;
}
h2{
font: normal 18px Georgia, verdana;
color: #d9d9d9;
}
#tudo{
padding: 20px;
}
*{
margin:0;
padding:0;
}
body{
font: 11px verdana;
}
a{
text-decoration:none;
outline:none;
}
ul{
list-style:none;
}
ul#menu{
position:relative;
width:400px;
}
ul#menu li{
float:left;
}
ul#menu li a{
background-color:#E7EEF8;
border:1px solid #8696AE;
color: #336699;
display:block;
float:left;
padding:5px;
width:88px;
font-weight: bold;
}
ul#menu li a span{
border-top:1px solid #8696AE;
/*background-color:#cccccc;*/
background-color:#ffc;
border:1px solid #336699;
border-top:none;
color:#000;
cursor:text;
display:block;
height:300px;
left:0;
padding:15px;
position:absolute;
top:25px;
width:400px;
z-index:1;
font: bold 15px "trebuchet ms", verdana, sans-serif;
color: #000000;
text-transform: uppercase;
}
/* aba clicada */
ul#menu li a:focus, ul#menu li a:active{
background-color:#ffc;
border-bottom-color:#ffc;
}
/* Conteudo "clicado" */
ul#menu li a:focus span, ul#menu li a:active span{
background-color:#ffc;
cursor:text;
z-index:2;
}
ul#menu li a:focus span, ul#menu li a:active span{
background-color:#ffc;
cursor:text;
z-index:2;
}/**/
</style>
<!--[if IE 6]>
<style type="text/css">
ul#menu li a span{
z-index:-1;
}
</style>
<![endif]-->
</head>
<body>
<div id="tudo">
<h1>Teste com abas sem JavaScript - Somente com Css</h1><br />
<div id="teste"></div>
<a name="conteudo"></a>
<div id="ativo">
<ul id="menu">
<li>
<a href="#1">Item 1 <span>Assunto referente a primeira aba</span></a>
</li>
<li>
<a href="#2">Item 2 <span>Assunto referente a segunda aba.</span></a>
</li>
<li>
<a href="#3">Item 3 <span>Assunto da terceira aba.</span></a>
</li>
<li>
<a href="#4">Item 4 <span>Conseguimos! Mais uma vitória!</span></a>
</li>
</ul>
</div>
<br />
<a href="#conteudo" class="invisivel">Quer voltar usuário?</a>
</div>
</body>
</html>Discussão (2)
Carregando comentários...