Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17737
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com abas

19-06-2007 06:28

Esse script é um menu com abas, onde ao clicar em cada aba é ativado determinado conteúdo.

CSS

<style type="text/css"> .td_ativada{ cursor:hand; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-top:1px solid #cccccc; background-color:#ffffff; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } a.ativada{ font-weight:bold; font-family:arial; font-size:8pt; color:#696969; text-decoration:none; } a.ativada:hover{ color:111111; text-decoration:underline; } .td_desativada{ cursor:hand; border-right:1px solid #cccccc; border-left:1px solid #cccccc; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#f9f9f9; width:100px; padding: 5px 5px 5px 5px; text-align:center; font-weight:bold; font-family:arial; font-size:8pt; color:#696969; } .td_baixo{ border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; background-color:#ffffff; } </style>

JAVASCRIPT

<script type="text/javascript"> function muda(id) { if(id=="td_topo_e") { td_topo_e.className="td_ativada"; td_topo_m.className="td_desativada"; td_topo_d.className="td_desativada"; document.getElementById("conteudo").innerHTML = document.getElementById("conteudo_1").innerHTML; } if(id=="td_topo_m") { td_topo_e.className="td_desativada"; td_topo_m.className="td_ativada"; td_topo_d.className="td_desativada"; document.getElementById("conteudo").innerHTML = document.getElementById("conteudo_2").innerHTML; } if(id=="td_topo_d") { td_topo_e.className="td_desativada"; td_topo_m.className="td_desativada"; td_topo_d.className="td_ativada"; document.getElementById("conteudo").innerHTML = document.getElementById("conteudo_3").innerHTML; } } </script>

HTML

<body onload="muda('td_topo_e')">   <div id="conteudo_1" style="display:none;">CONTEÚDO 1</div> <div id="conteudo_2" style="display:none;">CONTEÚDO 2</div> <div id="conteudo_3" style="display:none;">CONTEÚDO 3</div>   <table width="300" cellpading="0" cellspacing="0"> <tr> <td class="td_ativada" id="td_topo_e" onclick="muda(this.id);"><a class="ativada" href="#">link 1</a></td> <td class="td_desativada" id="td_topo_m" onClick="muda(this.id);"><a class="ativada" href="#">link 2</a></td> <td class="td_desativada" id="td_topo_d" onClick="muda(this.id);"><a class="ativada" href="#">link 3</a></td> </tr> <tr> <td class="td_baixo" colspan="3" id="conteudo"></td> </tr> </table>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado