[Resolvido] Display com Javascript

[santind2 0]

Boa tarde,

 

Estou precisando de uma ajuda, pois fiz a seguinte função que ainda não terminei pelo erro que está me ocorrendo.

Função:

function OpenSel(op){
           if(op == 0){
                        document.getElementById("principal").style.display = "block"
                        document.getElementById("divum").style.display = "none"
          }else if(op == 1){
                        document.getElementById("principal").style.display = "none"
                        document.getElementById("divum").style.display = "block"
          }
 }

 

Agora vou explicar o que está me acontecendo.

 

Tenho 4 arquivos default.asp, menu.asp, produtos.asp e descricao.asp.

O arquivo default.asp faz a chamada por include dos arquivos descricao.asp e menu.asp.

O arquivo menu, passa as informações de id via get para a pagina produto.asp.

 

No arquivo menu.asp tenho algumas categorias e suas subcategorias.

Ex.: titulo-> Produto

Primeira categoria -> Caderno

Subcat -> colegial

 

E por ai vai..

 

O meu problema é o seguinte.

Quando vou na primeira página default.asp o arquivo descricao.asp ele tem que aparecer, pois o id dele é "principal" e está setado com block.

Porém ele tem que sair quando vou em uma subcategoria do arquivo menu.asp como "Colegial" e aparecer outro no lugar dele. Só que ao ir para essa parte ele não some e a outra opção que aparece sobrepõe a primeira que não desaparece.

 

Espero ter sido claro e já agradeço a ajuda..

[douglash 0]

Olá, pelo que eu entendi você está tentando utilizar algo como tabs com conteudo, você pode fazer isso muito mais fácil com jquery mas bem, eu fiz em javascript veja se é isso que você está querendo.

 

JS

function tab(elem, evt){
   id = elem.href.substring(elem.href.indexOf('#')+1);
   item = elem.parentNode
   container = item.parentNode;
   tabsContainer = document.getElementById('tabs');

   if(tabsContainer === null){
     if (!document.getElementsByClassName) {
       document.getElementsByClassName = function(clsName) {
           var retElement = new Array(), 
               el = document.getElementsByTagName("*");

           for(var i = 0;i < el.length;i++){
               if(el[i].className.indexOf(" ") >= 0){
                   var classes = el[i].className.split(" ");
                   for(var j = 0;j < classes.length;j++) {
                   if(classes[j] == clsName) retElement.push(el[i]);
                   }
               } else if(el[i].className == clsName) retElement.push(el[i]);
           } 
           return retElement;
       }
     }
     tabContent = document.getElementsByClassName('tabContent');
   } else {
     tabContent = tabsContainer.childNodes;
   }

   for(var i=0; i < tabContent.length; i++){
       if(tabContent[i].id == id){
           tabContent[i].className = 'tabContent show';
       } else {
           tabContent[i].className = 'tabContent hide';
       }
   }

   var event = window.event || evt;
   if(event.preventDefault) event.preventDefault(); else return false;
}

 

Ele irá se basear pela classe para dar o show|hide.

 

<ul>
 <li><a href="#principal" onclick="tab(this,event)">Principal</a></li>
 <li><a href="#sub" onclick="tab(this,event)">Sub</a></li>
 <li><a href="#outra" onclick="tab(this,event)">Outra</a></li>
</ul>

<div id="tabs">
           <div id="principal" class="tabContent show">
               Principal
           </div>

           <div id="sub" class="tabContent">
               Sub
           </div>

           <div id="outra" class="tabContent">
               Outra
           </div>
</div>

 

O id é o href, e nesse caso temos as classes tabContent, show e hide, tabContent inicia como display:none para esconder todos, o hide é para somente esconder e o show para mostrar.

 

.tabContent, .hide { display:none; }
.show { display:block; }

 

Veja se é isso.

 

Um abraço.

[santind2 0]

Brigadão..

Deu certo