Javascript Tabs Toggler

by Salustiano Silva

HTML

<table>
    <tr>
        <td id="td_usua" onClick="AlternarAbas('td_usua','div_usua', 'form_usua')">Usuário</td>
        <td id="td_empr" onClick="AlternarAbas('td_empr','div_empr', 'form_empr')">Empresa</td>
        <td id="td_nota" onClick="AlternarAbas('td_nota','div_nota', 'form_nota')">Nota Fiscal</td>
        <td id="td_soft" onClick="AlternarAbas('td_soft','div_soft', 'form_soft')">Software</td>
    </tr>
</table>
<div id="div_usua">
    <form id="form_usua" method="post">
        <input type="text" value="">
    </form>
</div>
<div id="div_empr">
    <form id="form_empr" method="post">
        <input type="text" value="">
    </form>
</div>
<div id="div_nota">
    <form id="form_nota" method="post">
        <input type="text" value="">
    </form>
</div>
<div id="div_soft">
    <form id="form_soft" method="post">
        <input type="text" value="">
    </form>
</div>

CSS

table{
    width:100%;
}
td{
    text-align:center;
    cursor:pointer;
}
div{
    margin:10px 0;
    padding:10px;
    border:1px solid #ccc;
    background:#f1f1f1;
    text-align:center;
}

JavaScript

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

var arAbas = new Array();
arAbas[0] = new stAba('td_usua', 'div_usua', 'form_usua');
arAbas[1] = new stAba('td_empr', 'div_empr', 'form_empr');
arAbas[2] = new stAba('td_nota', 'div_nota', 'form_nota');
arAbas[3] = new stAba('td_soft', 'div_soft', 'form_soft');

function AlternarAbas(menu, conteudo, formulario)
{
  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';
   f = document.getElementById(arAbas[i].formulario);
   f.reset();
  }
  m = document.getElementById(menu)
  m.className = 'menu-sel';
  c = document.getElementById(conteudo)
  c.style.display = '';
}