Mudanças entre as edições de "Página principal"
Linha 1: | Linha 1: | ||
− | + | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
+ | <html> | ||
+ | <head> | ||
+ | <title>Abas</title> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> | ||
+ | <style type="text/css"> | ||
+ | <!-- | ||
+ | .unsel { | ||
+ | border-bottom-width: thin; | ||
+ | border-bottom-style: solid; | ||
+ | border-bottom-color: #0000FF; <!-- Cor da borda da aba --> | ||
+ | font-style: normal; | ||
+ | } | ||
+ | .sel { | ||
+ | border-top-width: thin; | ||
+ | border-right-width: thin; | ||
+ | border-bottom-width: 0px; | ||
+ | border-left-width: thin; | ||
+ | border-top-style: solid; | ||
+ | border-right-style: solid; | ||
+ | border-bottom-style: none; | ||
+ | border-left-style: solid; | ||
+ | border-top-color: #0000FF;<!-- cor da borda da aba--> | ||
+ | border-right-color: #0000FF;<!-- cor da borda da aba--> | ||
+ | border-left-color: #0000FF;<!-- cor da borda da aba--> | ||
+ | font-weight: bold; | ||
+ | background-color: #66CCFF;<!-- cor de fundo--> | ||
+ | } | ||
+ | .divsel { | ||
+ | visibility: visible; | ||
+ | position: absolute; | ||
+ | left: 10px;<!-- distância do conteúdo em relação à esquerda do browser--> | ||
+ | top: 57px;<!-- distância do conteúdo em relação ao topo--> | ||
+ | height: 520px;<!-- altura do conteúdo--> | ||
+ | width: 984px;<!-- largura do conteúdo--> | ||
+ | background-color: #66CCFF;<!-- cor de fundo do conteúdo--> | ||
+ | right: 10px; | ||
+ | bottom: 10px; | ||
+ | } | ||
+ | .divunsel { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | --> | ||
+ | </style> | ||
+ | </head> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<body> | <body> | ||
− | <div align="center"> | + | <div align="center" id="aba"> |
− | < | + | <script language="JavaScript"> |
− | < | + | function sel(idaba){ |
− | < | + | var aba=document.getElementById(idaba); |
− | < | + | var nAbas="5"; <!-- colocar o número de abas 1--> |
+ | for(var i="1";i<nAbas;i++){ | ||
+ | var id="aba"+i; | ||
+ | document.getElementById(id).className="unsel"; | ||
+ | } | ||
+ | aba.className="sel"; | ||
+ | |||
+ | for(var u="1";u<nAbas;u++){ | ||
+ | var idt="textaba"+u; | ||
+ | document.getElementById(idt).className="divunsel"; | ||
+ | } | ||
+ | var iddiv="text"+idaba; | ||
+ | document.getElementById(iddiv).className="divsel"; | ||
+ | } | ||
+ | </script> | ||
+ | <table width="100%" border="0" align="center" cellspacing="0" id="t_abas"> | ||
+ | <tr id="tr_abas"> | ||
+ | <td width="16,67%" class="unsel"> </td> | ||
+ | <td id="aba1" width="16,67%" class="sel" onClick="sel(this.id)">Aba 1</td><!-- colocar as abas aqui. Cuidado para não mudar as id das abas: formata: aba+número. ver exemplo--> | ||
+ | <td id="aba2" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 2</td> | ||
+ | <td id="aba3" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 3</td> | ||
+ | <td id="aba4" width="16,67%" class="unsel" onClick="sel(this.id)">Aba 4</td> | ||
+ | <td width="16,67%" class="unsel"> </td> | ||
+ | </tr> | ||
+ | </table> | ||
</div> | </div> | ||
+ | <div id="textaba1" class="divsel">Conteúdo da aba1 aqui</div><!-- colocar aqui o conteúdo das abas. Atenção para seguir o mesmo modelo de id.--> | ||
+ | <div id="textaba2" class="divunsel">Conteúdo da aba2 aqui</div> | ||
+ | <div id="textaba3" class="divunsel">Conteúdo da aba3 aqui</div> | ||
+ | <div id="textaba4" class="divunsel">Conteúdo da aba4 aqui</div> | ||
</body> | </body> | ||
− | |||
</html> | </html> | ||
− | |||
− | |||
− | |||
− | |||
− |
Edição das 09h57min de 26 de outubro de 2012
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Aba 1 | Aba 2 | Aba 3 | Aba 4 |
Conteúdo da aba1 aqui
Conteúdo da aba2 aqui
Conteúdo da aba3 aqui
Conteúdo da aba4 aqui