Ir para conteúdo
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!

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por luisdiascb
      ola pessoal eu queria por exemplo, eu tenho + de 4 mil visitas por dia no site mas nem todos dão um click para eu ganhar eu uso PoPADS.NET e por isso eles tende clicar.....
      Queria algo que podece usar no codigo index ou nas postagens dentro de uma div ou algo parecido e que automaticamente daria um click dentro da pagina em qualquer lugar para abrir o anuncio....
    • Por luisdiascb
      ola pessoal eu queria por exemplo, eu tenho + de 4 mil visitas por dia no site mas nem todos dão um click para eu ganhar eu uso PoPADS.NET e por isso eles tende clicar.....
      Queria algo que podece usar no codigo index ou nas postagens dentro de uma div ou algo parecido e que automaticamente daria um click dentro da pagina em qualquer lugar para abrir o anuncio....
    • Por PeeWee
      Estou há horas com um problema no meu código, tenho a pagina Auth.php onde há algumas function que funcionam normalmente, porém a seguinte apresenta problemas.
      function getMemberNivel($nivel) {
              $db_handle = new DBController();
              $query = "Select * from members where nivel = ?";
              $result = $db_handle->runQuery($query, 's', array($nivel));
              return $result;
          }
       
      Na Index.php faço a chamada dela da seguinte forma:
       
      $teste = $auth->getMemberByUsername($nivel);
       
      Ocorre que preciso utilizar a variavel $teste, só que exibe erro como se a variavel nao existisse. As demais variaveis vindas da pagina funcionam normalmente. 
      Espero que algum dos colegas possa me ajudar. 
    • Por tiagosoliver
      Estou criando um formulário de login com auth do firebase, o mesmo passa uma variável em javascript

      var emailuser = user.email;
      document.getElementById("email").innerHTML = email_id;

      Estou precisando pegar o valor dessa variável sem ser pelo  <p id="email">, pois preciso fazer um select no php.
      Se eu tentar buscar pela variável emailuser, ele não busca.
       
      Vi que talvez teria como usando o DOM, alguem poderia me ajudar?
       
      Obrigado.

       
    • Por PeeWee
      Boa noite pessoal, preciso fazer com que seja carregado somente a informação dentro de uma determinada div, pois ela deve atualizar quando for alterada a informação no BD. Carregar a pagina inteira a cada 5 segundos seria ruim pois provavelmente o usuário estranharia, fiz da seguinte forma, conforme os prints.
       
      Deu certo, porém a informação foi alterada a  partir da alteração feita no banco de dados, porém, dentro da div, apareceu outra página igual, gerando duplicidade sobreposta.
      Aguardo sugestões.


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.