Jump to content
guilherme.audi

só uma DIV não está obedecendo .display="none/table"

Recommended Posts

Olá, pessoal,

Sou meio-leigo e logo mais serei vesgo... não entendi onde está o problema:

 

Tenho uma situação de submenu bem simples, que deve mostrar (display="table") e esconder (display="none") algumas divs, conforme a seleção do usuário.

No início da página antes do <head> criei a seguinte estrutura:

 

<!-- CONTROLE DE ABAS :: MENU DETALHES -->
<script>
    function SelecCarac() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "table";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function SelecDimensoes() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "table";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function Selec3D() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "table";
        videotutorial.style.display = "none";
        esquemafios.style.display = "none";
    }
    function SelecVideo() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "table";
        esquemafios.style.display = "none";
    }
    function SelecEsquemaFios() {
        var caracteristicas = document.getElementById('div_carac');
        var dimensoes = document.getElementById('div_dimensoes');
        var projeto3d = document.getElementById('div_3d');
        var videotutorial = document.getElementById('div_video');
        var esquemafios = document.getElementById('div_esquemafios');
        
        caracteristicas.style.display = "none";
        dimensoes.style.display = "none";
        projeto3d.style.display = "none";
        videotutorial.style.display = "none";
        esquemafios.style.display = "table";
    }
</script>

(ridiculamente extenso, até suponho que haja um caminho menor..)

 

As abas desse "submenu" estão no corpo da página (asp clássico) assim:


<!-- ABAS :: MENU DE DETALHES DO PRODUTO -->
<div class="container-principal" style="text-align: center;">
    <% if Len(VetProd(97,0)) > 5 Then %>
        <div class="detalhe-menu-abas" id="bt_carac" onclick="SelecCarac()" >Características</div>
    <%End if
    if Len(VetProd(11,0)) > 0 Then %>
        <div class="detalhe-menu-abas" id="bt_dimensoes" onclick="SelecDimensoes()">Dimensões</div>
    <%End if
    if Len(VetProd(92,0)) > 1 Then %>
        <div class="detalhe-menu-abas" id="bt_3d" onclick="Selec3D()">Desenho 3D</div>
    <%End if
    if Len(VetProd(135,0)) > 3 Then %>
        <div class="detalhe-menu-abas" id="bt_video" onclick="SelecVideo()">Video tutorial</div>
    <%End if
    if Len(VetProd(22,0)) > 0 Then %>
        <div class="detalhe-menu-abas" id="bt_esquemafios" onclick="SelecEsquemaFios()">Ligação dos fios</div>
    <%End if%>
</div>
<!-- -->

 

..E essas id chamadas "div_carac", "div_dimensoes", "div_3d", "div_video" e "div_esquemafios" estão assim:

 

<!-- DIMENSÕES -->
<div class="container-principal" style="text-align: center; display: none;" id="div_dimensoes">
    <h3 style="text-align: left;">Dimens&otilde;es<span class="letramed2">&nbsp;(mm)</span></h3>
    <a href="admin/imgs/icones/<%= VetProd(11,0) %>" target="_blank"><img src="admin/imgs/icones/<%= VetProd(11,0) %>" alt="Dimens&otilde;es de <%= VetProd(1,0) %> em mm" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" class="detalhe-dimensoes"/></a>
</div>
<!-- -->

 

<!-- CARACTERÍSTICAS ESPECIAIS -->
<div class="container-principal" id="div_carac">
    <h3>Caracter&iacute;sticas especiais</h3>
    <%= VetProd(97,0)%>
</div>
<!-- -->
    
<!-- VÍDEO INCORPORADO  -->
<div style="background-color: #000000; width: 100%; display: none;" id="div_video">
    <div class="container-principal" style="background-color: black; text-align: center; padding: 1% 0;">
        <iframe class="detalhe-video" src="<%= VetProd(135,0) %>" frameborder="0" allowfullscreen></iframe><br />
        <a href="https://www.youtube.com/user/weightechbrasil/search?query=<%=VetProd(1,0)%>" style="color:#FFFFFF;" title="Veja mais em Youtube/WeightechBrasil" target="_blank" class="submenu"><img src="http://www.weightech.com.br/imgs/site/Logo_Youtube_color_horizontal.png" height="30" title="Canal WeightechBrasil no Youtube" alt="Youtube.com/WeightechBrasil" style="margin-bottom:5px;"/><br>Youtube.com/WeightechBrasil</a>
    </div>
</div>
<!-- -->

 

<!-- PROJETO 3D -->
<% if Len(VetProd(92,0)) > 1 Then %>
    <div class="container-principal" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">
        <iframe style="width: 100%; height: 680px;" src="<%=VetProd(92,0)%>" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
    </div>
<%End if%>
<!-- -->

 

<!-- ESQUEMA DE LIGAÇÃO -->
<div class="container-principal" style="display: none;" id="div_esquemafios">
    <h3>Esquema de liga&ccedil;&atilde;o dos fios</h3>
    <img src="admin/imgs/icones/<%= VetProd(22,0) %>" alt="Esquema de liga&ccedil;&atilde;o" title="<%= VetProd(136,0) %>&nbsp;<%= VetProd(2,0) %>&nbsp;<%= VetProd(1,0) %>" style="width:90%; max-width:400px;"/>
</div>
<!-- -->

 

Tudo funciona, exceto o VÍDEO INCORPORADO (id="div_video").

Por quê?!

 

Obrigado!

Share this post


Link to post
Share on other sites

Pra ficar simples e eficiente.

HTML

<div class="container-principal" style="text-align: center;">
        <div class="detalhe-menu-abas" id="carac" >Características</div>
        <div class="detalhe-menu-abas" id="dimensoes">Dimensões</div>
        <div class="detalhe-menu-abas" id="3d">Desenho 3D</div>
        <div class="detalhe-menu-abas" id="video">Video tutorial</div>
        <div class="detalhe-menu-abas" id="esquemafios">Ligação dos fios</div>
</div>

<div class="container-principal menu" style="text-align: center; display: none;" id="div_dimensoes">    dimensoes</div>
<div class="container-principal menu" id="div_carac" style="text-align: center; display: none;">    Caracteristicas especiais</div>
<div class=" menu" style="background-color: #000000; width: 100%; display: none;" id="div_video">   video</div>
<div class="container-principal menu" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">        projeto 3d    </div>
<div class="container-principal menu" style="display: none;" id="div_esquemafios">    fios</div>

 

JS usando jquery

$(".detalhe-menu-abas").click(function(){
 $(".menu").hide();
 $("#div_"+ $(this).attr("id")).show();
});


Exemplo acima funcionando: https://jsfiddle.net/ivanteles/xpvt214o/873490/

Share this post


Link to post
Share on other sites

@guilherme.audi Primeiro vamos a questão de performasse.

Você não precisa varrer o DOM toda vez que que precisar manipular algum elemento.

Pode simplesmente só armazenar os elementos em variáveis fora do escopo das funções que as mesmas reconhecem a variável pois ela passa a ser global.

 

Para que o javascript encontre elementos, os mesmo já deve ter sido devidamente carregados, ou seja atrasar o script através de métodos load ou executar as buscas no final do documento o que você ganha em muito na performasse também.

 

Para exibir elementos você pode optar por editar-los in-line usando a propriedade 'block' ou alterar seus atributos de class.

 

Primeiro o exemplo in-line assim como você está querendo fazer

Spoiler

<div id="div-a" style="display: none">div A</div>
<div id="div-b" style="display: none">div B</div>

<button onclick="mostra_exemplo_a()">Mostrar / esconder</button>

<script>
    var status = 0;
    var divA = document.getElementById('div-a');
    var divB = document.getElementById('div-b');

    function mostra_exemplo_a() {
        if (status == 1) {
            divA.style.display = 'none';
            divB.style.display = 'none';
            status = 0;
        } else {
            divA.style.display = 'block';
            divB.style.display = 'block';
            status = 1;
        }
    }
</script>

 

Perceba que o script está escrito depois dos elementos html, então o javascript só é carregado depois dos elementos html.

E somente busco por esses elementos uma única vez ganhando em muito na performasse.

 

Agora veja uma outra foma das diversas que pode fazer.

Spoiler

<style>
    .esconde {display: none}
    .esconde.mostra {display: block}
</style>

<div id="div-c" class="esconde">div A</div>
<div id="div-d" class="esconde">div B</div>

<button onclick="mostra_exemplo_b()">Mostrar / esconde</button>

<script>
    var divC = document.getElementById('div-c');
    var divD = document.getElementById('div-d');

    function mostra_exemplo_b() {
        divC.classList.toggle('mostra');
        divD.classList.toggle('mostra');
    }
</script>

 

Esse exemplo combinei o html > javascript > CSS. Para mostrar ou ocultar os elementos.

 

E o melhor em ambos casos só usa puro e simples javascript sem depender de nada externo ganhando muito, mas muito mesmo em performasse do que usar outra coisa.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Marxrj
      Galera, tenho um carrossel no meu arquivo, porém queria que elas mudassem aleatóriamente a cada refresh na página, pois ela s´fica pela ordem normal.
      <div> <div> <div class="loop owl-carousel owl-theme"> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.02"> </div> <div> <img src="imagens/jpeg.03"> </div> <div> <img src="imagens/jpeg.01"> </div> <div> <img src="imagens/jpeg.05"> </div> <div> <img src="imagens/jpeg.07"> </div> <div> <img src="imagens/jpeg.07"> </div> </div>  
    • By RodrigoCesar
      Boa noite,
      estou tendo a seguinte questão,  estou precisando posicionar elementos (divs) um do lado do outro de forma que fiquem responsivos então os mesmos desçam em fiquem um em baixo do outro em telas menores. Ou seja, quando em tela grande de pc um do lado do outro, em telas menores móveis um em cima do outro. O recomendado pra isso seria usar float, porém preciso que ao ficar um em cima do outro os elementos fiquem centralizados na tela e a propriedade float sempre joga os elementos pra direita ou pra esquerda, não deixa ficar centralizado. Preciso então posicionar um do lado do outro sem uso de float ou encontrar outra solução, segue código abaixo. Desde já agradeço.
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="estilo.css" /> </head> <body> <div class="blocos_caracteres"> <div class="blocos_caracteres_content_1"> <p>oi</p> </div> <div class="blocos_caracteres_content_2"> <p>oi</p> </div> <div class="blocos_caracteres_content_3"> <p>oi</p> </div> <div class="blocos_caracteres_content_4"> <p>oi</p> </div> </div> </body> </html> /****reset****/ html { margin:0; padding:0; border:0; height:100%; } body { margin:0; padding:0; border:0; height:100%; } ul, ol, li {list-style:none;} /****reset****/ .blocos_caracteres {width:94%; margin: 0 auto; } .blocos_caracteres_content_1 {width:25%; height:300px; min-width: 250px; background-color: yellow; float: left; } .blocos_caracteres_content_2 {width:25% ; height:300px; min-width: 250px; background-color: green; float: left; } .blocos_caracteres_content_3 {width:25% ; height:300px; min-width: 250px; background-color: blue; float: left;} .blocos_caracteres_content_4 {width:25% ; height:300px; min-width: 250px; background-color: red; float: left;}  
    • By Mewmew
      Bom dia!
       Teria como alguém me ajudar? 
      Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...
       
       Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.
       
      Só que ele está ficando igual a imagem 2.
       
       Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 
      Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! 
       



    • By Icaro Luan
      error
    • By leandro32
      Senhores, me ajudem pelo amor de Deus!!!
      Estou montando uma "Base de Documentos" onde eu trabalho. Essa base é dividida por tipo de Documento (CNH/RG/OUTROS) e ano de expedição (2019/2018/2017...). As máscaras principais (HOME's) já foram feitas, o problema é que não consigo vincular esses botões dos anos em DIV's diferentes.
      Alguém, em nome de Jesus Cristo, me ajuda a criar uma regra que, ao clicar no ano 2018,  doc aparece na DIV ao lado com a barra de ZOOM??? Porque eu já estou ficando louco!!!
       
                                                                          <!-- CÓDIGO DO SITE -->
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="estilo.css" />
         
                                                    <title>ACRE - RG</title>
      </head>

      <body>
                          <!-- CABEÇALHO COM MENUS -->
      <header>
      <div class="container">
          <div class="zoom">
              <img src="logo.png" class="img-responsive" height="95px" width="130px" border="2px">
          
                <div id="menu">
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/Base%20Documental.html">HOME</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/RG.html">RG</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/CNH.html">CNH</a>
                    <a href="file:///C:/Users/Info-pc/Desktop/Base%20Documental/OUTROS.html">OUTROS</a>
                </div>
          </div>
      </div>
      </header>
       
          <!-- O CORPO DO SITE -->
      <div class="container2">
      <fieldset>
      <center><h2><i> Estado do ACRE - RG</i></h2></center>
      </fieldset>
      </div>

      <div class="container3">
                                                 <!-- COLUNA DOS ANOS -->

        <div class="container4">
           <div class="col-lg-2 col-md-2 col-sm-2">
             <div style="height: calc(100vh - 230px); overflow-y: scroll; overflow-x: hidden; right: 16px">
               <div class="btn-group-vertical" role="group" aria-label="..."
                   <div class="zoom">

                          <button class="btn ng-scope btn-default" ng-class="{'btn-primary': analyser.selectedDocModel.guid === docModel.guid, 'btn-default': analyser.selectedDocModel.guid !== docModel.guid}" ng-repeat="docModel in analyser.filteredDocModels" ng-click="analyser.selectDocModel(docModel)" ng-show-img="areaimagem" style="-webkit-user-drag: none" class="ng-scope" img src="AM.01.jpg" class="img-responsive" href="AM.01.jpg" size="80%">
                                              <small class="ng-binding">RG</small>
                                              <br>
                                              <small class="ng-binding">AM- 2019</small>
                                          </button>
                         
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
       

          <!-- O RODAPÉ Do SITE -->

      <footer>
              <span> <b>BASE DOCUMENTAL</b> - &copy;<i>Leandro do Nascimento Martins</i></span>
      </footer>
      </div>
      </div>
      </div>
           
      </body>
      </html>
       
       
       
                                                                             <!-- ARQUIVO ESTILO.CSS -->
      /* PADRÃO CSS */

      /* eliminando configurações dos browsers*/
      * {margin: 0;    padding: 0;    font-family: verdana, helvetica, arial;}

      /* TODAS AS TAG's DECLARADAS */ /* PARA UMA "TAG - PARTE" NORMAL, USA-SE APENAS O NOME */
      p {color: silver;    font-size: 15px;    text-align: center;    font-family: arial, "Times new roman";    text-shadow: 1px 1px 1px #111111;}

      body {background-color: #E8E8E8;    width: 100%;}

      header {background-color: #08298A;    height: 100px;    padding: 2px;    width: 100%;}

      footer   {clear: both;    color: white;    background-color: #08298A;    height: 40px;    text-align: center ;    padding: 10px;    text-shadow: 1px 1px 1px black;}

      h1 {color: SILVER;    text-align: center;    margin: 0 0 50px 0;    text-shadow: 2px 2px 2px #111111;}
      h2 {color: SILVER;    text-align: center;    margin: 5px 0 5px 0;    text-shadow: 2px 2px 2px #111111;}
       
      /* TODAS AS  ID's */    /* PARA "IDENTIFICAÇÃO - ID" DA DIV USA-SE  .#. HASHTAG  */
      #div_principal {background-color: white;    clear: both;    background-size: 65%;    min-height: 485px;    padding: 40px 0 40px 0;    margin: 1% 1% 1% 1%;    width: 100%;}
      #logo {float: left;    margin: 0 20px 0 10px;}
      #menu {float: right;    margin-top: 40px;    text-transform: uppercase;}
      #menu a {padding: 32px 20px;    text-decoration: none;    color: white;    border-radius: 20px;    border-top-right-radius: 20px;    border-bottom-left-radius: 20px;    cursor: pointer;    transition: background-color 1s;}
      #menu a:hover {background-color: white;    color: black;}
      #btn-default {text-decoration: none;}

      /* CLASS */ /* PARA CLASSES-CONTAINER's DIFERENTES USA-SE O PONTO  .  */
      .efeito {background-color: rgba(0, 0, 0, 0.3);    padding: 100px 0 100px 0;}
      .container {width: 100%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/}

      .container2 {width: 97%; /* largura */    margin: auto; /* ajuste automatico independente de resolução*/    background-color: white;}
      .container3 {width: 95%;    margin: auto;    background-color: #FFFAFA;    clear: both;}
      .container4 {width: 10%;    float: left;    background-color: #FFFAFA;    clear: both; }
      .container5 {background-color: ;     float: left;}
      .col-lg-2 {width: 95%; }
      .col-md-2 {width: 50px;}
      .col-sm-2  { width: 79px;}
      .col-lg-10  { width: 80%; }

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.