How to create a tab menu with Javascript?

Asked

Viewed 2,749 times

2

I have a menu that if the user selects the option it will change, etc! The problem is that it leaves all other programs open when accessing 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>

Alternarabas:

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 the 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 an answer, I would like to know at least whether there is a way to do using the switch or the (if..else)!

javascript html menu
  • 1

    I don’t understand :( @Felipe - create a jsfiddle

  • Cool @Felipe, but I didn’t understand it like that.. What do you want when you click it to be active? Something like this?

  • @Jeffersonalison, my problem is that when I select a tab, it brings the contents of the other tabs together. ie, they remain open! I wish that when selecting a tab, only it has content and the others remain blank!

2 answers

4

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

Jsfiddle Working Example

...
<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')">
 ...

All right but it doesn’t work

If you tag script present in section head of your page and even then the code is not executed in conditions as can be seen in the link above to the Jsfiddle, then there is likely to be a Javascript error on the page whose page is causing the browser to interrupt the execution of scripts.

When this happens, certain things controlled by Javascript are not verified on the page.

In your particular case, as your function AlternarAbas is responsible for hiding all tabs and activating only one, if the Javascript execution is stopped before this function is executed, you have all tabs visible.

Solution

You shall make use of the Inspector from your browser to observe errors that appear on the console in order to identify and resolve them.

Documentation

How can it be read in MDN - window.onload:

The load Event Fires at the end of the Document loading process. At this point, all of the Objects in the Document are in the DOM, and all the images and sub-frames have finished loading.

That translated:

The loading event triggers at the end of the document loading process. At this point, all objects in the document are in the DOM, and all images and sub-frames have just been loaded.

This tells us that your function AlternarAbas will be called after reading the document, if it contains errors the function is not executed, leading to the problem you face.

Jsfiddle

For this type of scenarios to be tested in Jsfiddle, you need to choose the two options below:

  1. Indicate that the javascript tab should be in the <head>;
  2. Fill in field for tag body instead of putting in the editor.

Indicar JavaScript para head Preencher o HTML para a tag body

  • Well @Zuul, he is already inside the section <head></head>, I just didn’t put in the example!

  • @Felipe As you can see from the Jsfiddle I created, your code is working fine. I supplemented the question with additional information about Javascript being interrupted by an error before your Tabs code.

1

Browser other questions tagged javascript html menu

You are not signed in. Login or sign up in order to post.