Existem muitos scripts na internet que fazem isso, basta implementa-los em sua pagina.
Infelizmente a grande maioria não vem com as informações nescessárias então eu resolvi postar aqui o meu tab script favorito, o jquery id tabs, todos os arquivos que você precisa está nesse site:
sunsean id tabs
aproveite e va na seção " advanced" e teste alguns exemplos do que esse plugin pode fazer.
arquivo do id tabs:
jquery.idTabs.min.js (escolha salvar destino como)
e é claro que você deve carregar o jquery na sua pagina, fique tranquilo a maioria das paginas hoje em dia ja usa esse script e garanto que não vai aumentar o tempo de carregamento da sua pagina significantemente.
baixe o jquery:
JQUERY
pronto agora e so carregar esses arquivos na seção <HEAD> de sua pagina.
assim:
Não esqueça o tab plugin:<script type="text/javascript" src="(seu dominio)/jquery(confira o nome do arquivo).js"></script>
logo abaixo desta linha digite:<script type="text/javascript" src="(seu dominio)/jquery.idTabs .min.js"></script>
<script type="text/javascript"> var settings = { start:1, change:false }; $("#adv1 ul").idTabs(settings,true); </script>
Cada <a href="#tab"> dentro do elemento da classe class="idTabs"
vai mostrar o elemento com o id="tab". Conforme o codigo de exemplo.
<div id="usual1" class="usual">
<div class="tamb">
<ul class="idTabs">
<li><div class="taker"><a href="#jquery">jQuery</a></div></li>
<li><div class="taker"><a href="#official">Tabs 3</a></div></li>
</ul>
</div>
<div class="shower">
<div id="jquery">If you haven't checked out ...</div>
<div id="official">idTabs is only a simple ...</div>
</div></div>
na sua folha de estilos (.css) voce poderá então personalizar as cores e fundos, podendo optar por imagens, cores, animações etc.
#usual1 ul {
text-align: left;
list-style-type: none;
text-decoration: none;
margin: 3px 0 25px 0px;
}
#usual1 li {
text-align: left;
text-decoration: none;
margin-top: -2px;
line-height: 1.6em;
display: inline;
}
#usual1 .taker a {
width: 200px;
height: 15px;
float: left;
text-align: center;
background: #000;
font: bold 15px tahoma;
border: 1px solid #888;
margin: 0 5px 0 5px;
}
#usual1 .taker a:hover {
background: #c9c9c9;
}
#usual1 .taker .selected {
background:#fff;
}
Pronto implementando este codigo você podera fazer como nos exemplos da SUNSEAN ou até mesmo a seção minha conta do site e-calce .
Até a proxima
Nenhum comentário:
Postar um comentário