How to create a tab menu with JavaScript?

Navigation
2

I have a menu that in case the user select the option it will changing, etc! The problem is that it leaves all other programs open when you access one.

Menu: 

<body onLoad="AlternarAbas('td_usua','div_usua')">
<table width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
   <tr>
    <td height="20" width="50" class="menu" id="td_usua" onClick="AlternarAbas('td_usua','div_usua')">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" onClick="AlternarAbas('td_empr','div_empr')">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" onClick="AlternarAbas('td_nota','div_nota')">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" onClick="AlternarAbas('td_soft','div_soft')">Software</td>
  </tr>

AlternateAbas: 

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 = '';
}

arAbas: 

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

stAba: 

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

JSFiddle

So I thought I'd use switch or (if..else) to change the selection mode. That is, it will only open a certain area when it is accessed. But I have no idea how to implement .. Any suggestions or tips?

Even posting a response, I'd like to know at least whether a way to do it using switch or (if..else) !

    
asked by anonymous 01.07.2014 / 15:18

2 answers

4

Your JavaScript code so that they can be called in the onload event of the BODY tag should be present within the <head></head> section of your page:

Example to work in JSFiddle 

...
<head>
   <script type="text/javascript">
     function stAba(menu,conteudo) {
       this.menu = menu;
       this.conteudo = conteudo;
     }

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

     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 = '';
    }
  </script>
</head>
<body onload="AlternarAbas('td_usua', 'div_usua', 'form_usua')">
 ...

Everything is correct but does not work

If you have the script tag present in the head section of your page and even then the code does not run under conditions as seen in the link above for the

01.07.2014 / 15:43
Text Paging How to break lines when sending an email?