Menu Com multiplas abas

callebe_callebe · 21 de fevereiro de 2008

Olá Galera,

Eu preciso saber como faço um menu de abas com multiplas abas.

Vou explicar.

Vamos a um exemplo, suponha um menu com várias abas, quando clicar em uma delas quero que apareça um segundo menu de abas em baixo do primeiro.

Como faço isso de maneira que, um formulário preenchido em uma aba não perca seus valores (a não ser que seja enviado os dados) quando se clique em outra aba, assim, quando se volta para a aba anterior o formulário continua preenchido (a não ser que seja enviado os dados ou outro formulário seja enviado).

Sou iniciante em PHP e estou fazendo um pequeno site em PHP.

Uso php e CSS para fazer, fora mysql para o banco de dados.

Grato pela ajuda de quem colaborar.

<head>
<title> Utilização de Abas - Javascript </title>
<style>

body, table {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #ffffff;
background-color: #666666;
border: 1px solid #000000;
padding: 5px;
cursor: hand;
height: 20px;
}

.menu a, a:visited, a:hover{
text-decoration:none;
color:#ffffff;
display: block;
width: 100%;
}

.menu-sel {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #ffffff;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
padding: 5px;
cursor: hand;
}

.tb-conteudo {
width: 100%;
height: 100%;
}

.conteudo {
position:relative;
left: 0px;
top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
background-color: #ffffff;
padding: 5px;
width: 100%;
height: 100%;
}

</style>
<script language="JavaScript">

function stAba(menu,conteudo)
{
this.menu = menu;
this.conteudo = conteudo;
}

var arAbas = new Array();
arAbas[0] = new stAba('td_00','div_00');
arAbas[1] = new stAba('td_01','div_01');
arAbas[2] = new stAba('td_02','div_02');
arAbas[3] = new stAba('td_03','div_03');

var arAbas2 = new Array();
arAbas2[0] = new stAba('td_02_00', 'div_02_00');
arAbas2[1] = new stAba('td_02_01', 'div_02_01');
arAbas2[2] = new stAba('td_02_02', 'div_02_02');
arAbas2[3] = new stAba('td_02_03', 'div_02_03');

function AlternarAbas(menu,conteudo)
{
for (i=0;i<arAbas.length;i++)
{
m = document.getElementById(arAbas[i].menu);
m.className = 'menu';
c = document.getElementById(arAbas[i].conteudo)
c.style.display = 'none';
}
m = document.getElementById(menu)
m.className = 'menu-sel';
c = document.getElementById(conteudo)
c.style.display = '';
}

function AlternarAbas2(menu,conteudo)
{
for (i=0;i<arAbas2.length;i++)
{
m = document.getElementById(arAbas2[i].menu);
m.className = 'menu';
c = document.getElementById(arAbas2[i].conteudo)
c.style.display = 'none';
}
m = document.getElementById(menu)
m.className = 'menu-sel';
c = document.getElementById(conteudo)
c.style.display = '';
}

</script>

</head>

<body onLoad="AlternarAbas('td_00','div_00')">

<table width="100%" height="100%" cellspacing="0" cellpadding="0"
border="0">

<tr>
<td height="20" width="100" class="menu" id="td_00"
onClick="AlternarAbas('td_00','div_00')">
00
</td>
<td height="20" width="100" class="menu" id="td_01"
onClick="AlternarAbas('td_01','div_01')">
01
</td>
<td height="20" width="100" class="menu" id="td_02"
onClick="AlternarAbas('td_02','div_02')">
02
</td>
<td height="20" width="100" class="menu" id="td_03"
onClick="AlternarAbas('td_03','div_03')">
<a href="teste.html">03</a>
</td>

<td width="460" style="border-bottom: 1px solid #000000">

<td>
</tr>
<tr>
<td height="460" class="tb-conteudo" colspan="5">
<div id="div_00" class="conteudo" style="display: none">
00
</div>

<div id="div_01" class="conteudo" style="display: none">
01
</div>
<div id="div_02" class="conteudo" style="display: none">

<table width="100%" height="100" cellspacing="0" cellpadding="0"
border="0">

<tr>
<td height="20" width="100" class="menu" id="td_02_00"
onClick="AlternarAbas2('td_02_00','div_02_00')">
02 00
</td>
<td height="20" width="100" class="menu" id="td_02_01"
onClick="AlternarAbas2('td_02_01','div_02_01')">
02 01
</td>
<td height="20" width="100" class="menu" id="td_02_02"
onClick="AlternarAbas2('td_02_02','div_02_02')">
02 02
</td>
<td height="20" width="100" class="menu" id="td_02_03"
onClick="AlternarAbas2('td_02_03','div_02_03')">
02 03
</td>

<td width="460" style="border-bottom: 1px solid #000000">

<td>
</tr>
<tr>
<td height="460" class="tb-conteudo" colspan="5">
<div id="div_02_00" class="conteudo" style="display: none">
02 00
</div>
<div id="div_02_01" class="conteudo" style="display: none">
02 01
</div>
<div id="div_02_02" class="conteudo" style="display: none">
02 02
</div>
<div id="div_02_03" class="conteudo" style="display: none">
02 03
</div>
</td>
</tr>
</table>

</div>
<div id="div_03" class="conteudo" style="display: none">
03
</div>
</td>
</tr>
</table>
</body>
</html>
<html>