Mudanças entre as edições de "Pagina Teste1"

De wiki.eliteSoft.com.br
Ir para: navegação, pesquisa
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>
  
<div id="clustrmaps-widget"></div><script type="text/javascript">var _clustrmaps = {'url' : 'http://wiki.elitesoft.com.br/index.php/P%25C3%25A1gina_principal', 'user' : 1005898, 'server' : '3', 'id' : 'clustrmaps-widget', 'version' : 1, 'date' : '2012-04-16', 'lang' : 'pt', 'corners' : 'square' };(function (){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www3.clustrmaps.com/counter/map.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);})();</script><noscript><a href="http://www3.clustrmaps.com/user/eebf594a"><img src="http://www3.clustrmaps.com/stats/maps-no_clusters/wiki.elitesoft.com.br-index.php-P%2525C3%2525A1gina_principal-thumb.jpg" alt="Locations of visitors to this page" /></a></noscript>
+
<body>
 +
<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">&nbsp;</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">&nbsp;</td>
 +
      </tr>
 +
  </table>
 +
</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>
 +
</html>

Edição das 10h05min de 26 de outubro de 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Abas

  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