Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

guilherme.audi

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

Por , em Javascript

Recommended Posts

guilherme.audi    0

guilherme.audi
Postado

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

Ivan.Teles    23

Ivan.Teles
Postado

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

Omar~    87

Omar~
Postado

@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
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Alessandro Bodão
      H1 que preencha toda a largura da container
      Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Giovanird
      Cor da div conforme o valor do value
      Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • GOD
      Div Noticias com RSS
      Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • mateus.andriollo
      [RESOLVIDO] Função para legendas
      Por mateus.andriollo
      Boa tarde,
      Tenho alguns campos numéricos q ao fazer uma select gostaria q retornasse uma legenda
       
      exemplo:
      Status: 0=Inativo / 1=Ativo Condição: 1=Funcionando / 2=Em manutenção / 3=Manutenção Interna   
      Seria algo assim, tenho varias tabelas com estes campos... mas tenho q ficar usando replace.
      Existe uma forma de criar uma função para isso? Nem q na função eu tenha que setar nome do campo, ficando assim:
      Legenda('Status',cadastro.status) 
×

Informação importante

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

  Aceito