2

Tenho um menu que caso o usuário selecione a opção ele vai mudando, etc! O problema é que ele deixa todos os outros programas abertos quando acessa um.

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

Assim, pensei em utilizar o switch ou (if..else) para mudar o modo de seleção. Ou seja, só ira abrir determinada área quando ela for acessada. Mas não tenho ideia de como implementar .. Alguma sugestão ou dica?


Mesmo postando uma resposta, gostaria de saber pelo menos se a uma maneira de fazer utilizando o switch ou o (if..else)!

3
  • 1
    Não entendi :( @Felipe - crie um jsfiddle Commented 1/07/2014 às 13:27
  • Legal @Felipe, mas não entendi assim.. oque é pra fazer.. Vc quer que quando clique ela fique ativa? Alguma coisa assim? Commented 1/07/2014 às 13:40
  • @JeffersonAlison, o meu problema é que quando eu seleciono uma aba, ele traz o conteúdo das demais abas juntos .. ou seja, eles permanecem abertos! Eu desejo que quando selecionar uma aba, só ela tenha conteúdo e as demais permaneçam em branco!
    – Felipe
    Commented 1/07/2014 às 13:43

2 Respostas 2

4

O teu código de JavaScript para que possam ser chamado no evento onload da tag BODY, deverá estar presente dentro da secção <head></head> da tua página:

Exemplo a Funcionar no 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')">
 ...

Tudo correcto mas não funciona

Se tens a tag de script presente na secção head da tua página e mesmo assim o código não é executado em condições conforme pode ser visto no link em cima para o JSFiddle, então o provável é existir um erro de JavaScript na página cujo mesmo está a levar o navegador a interromper a execução de scripts.

Quando isto acontece, determinadas coisas controladas por JavaScript não se verificam na página.

No teu caso em particular, como a tua função AlternarAbas está responsável por esconder todas as abas e activar apenas uma, se a execução de JavaScript é interrompida antes desta função ser executada, ficas com todas as abas visíveis.

Solução

Deverás fazer uso do Inspector do teu navegador para observar os erros que aparecem na consola de forma a identificar e resolver os mesmos.

Documentação

Como pode ser lido na 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.

Que traduzido:

O evento de carregamento dispara no final do processo de carregamento do documento. Neste ponto, todos os objectos no documento estão no DOM, e todas as imagens e sub-frames terminaram de ser carregadas.

Isto diz-nos que a tua função AlternarAbas vai ser chamada após a leitura do documento, se o mesmo contiver erros a função não é executada, levando ao problema que enfrentas.


JSFiddle

Para que este tipo de cenários possa ser testado no JSFiddle, é preciso escolher as duas opções em baixo indicadas:

  1. Indicar que a tab de javascript deve ficar no <head>;
  2. Preencher o campo para a tag body ao invés de colocar no editor.

Indicar JavaScript para head Preencher o HTML para a tag body

2
  • Bem @Zuul, ele já se encontra dentro da secção <head></head>, eu só não coloquei no exemplo!
    – Felipe
    Commented 1/07/2014 às 13:48
  • @Felipe Como podes ver pelo JSFiddle que criei, o teu código está a funcionar em condições. Complementei a pergunta com informação adicionar sobre o JavaScript poder estar a ser interrompido por um erro antes desse teu código das Abas.
    – Zuul
    Commented 1/07/2014 às 14:00
1

Olá,

Sei que já responderam utilizando Javascript puro, mas que tal essa solução em jQuery?

http://jsfiddle.net/vrcca/a8yM7/

Abs!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .