Comment rendre une div cachée par défaut en utilisant javascript?

J'utilise le code suivant pour activer la visibilité d'une zone div:Comment rendre une div cachée par défaut en utilisant javascript?

<script type="text/javascript"> 
function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 
</script>

Pour basculer, je me sers onclick = "toggle_visibility ('id_of_element_to_toggle');"

La partie que je n'aime pas est que cela le rend visible par défaut lorsque la page se charge. Comment puis-je le rendre caché par défaut jusqu'à ce qu'il soit basculé pour être visible? Je voudrais le faire dans le même bloc javascript si possible. Le plus simple sera le mieux.

Comment puis-je basculer la visibilité de 2 div à la fois? Pour les faire basculer.

Source

2013-10-03 Arringar1

Vous cherchez CSS, pas JS pour l'avoir caché par défaut ... – Ian

Utilisez CSS, 'display: none', pas besoin de Javascript ici –

donc si je fais simplement style =" display: none "dans l'étiquette div qui devrait le faire? – Arringar1

puisque vous utilisez CSS pour l'activer, vous devez utiliser CSS pour définir son état initial: display:none soit en ligne dans l'attribut style ou idéalement dans une feuille de style mondial.

Source

2013-10-03 15:39:37 Brenden

L'option la plus simple est de mettre cela dans le CSS, alors il sera vraiment défini comme caché à partir du moment où le style est appliqué par le navigateur, avant Javascript est exécuté:

div.item_name { display: none; }

Source

2013-10-03 15:40:28 Luke

Vous besoin de l'appeler:

<script type="text/javascript"> 

toggle_visibility('id_of_element_to_toggle'); 

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
} 
</script>

Vous pouvez ajouter un peu de CSS aussi:

#id_of_element_to_toggle{display:none;}

Performance w Sois plus rapide avec CSS.

Source

2013-10-03 15:41:16

+1 cela répond en fait à la question de l'OP et en fournissant la meilleure alternative css –

ressemble à toutes les réponses à la question, juste avec différents niveaux de détail. – Brenden

essayer cette

<!DOCTYPE html> 
    <html> 
    <body> 
    <script type="text/javascript"> 
     function toggle_visibility(id) { 
      var e = document.getElementById(id); 
      if(e.style.display == 'block') 
       e.style.display = 'none'; 
      else 
       e.style.display = 'block'; 
     } 
    </script> 
    <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a> 
    <div id="foo" style="display:none">toggle visibility.</div> 


    </body> 
    </html>

Source

2013-10-03 15:44:39 user2092317

donner un poisson à un homme, apprendre à un homme à pêcher ... lui apprendre quelque chose – Brenden

Dans des cas comme cela, je cache la div en utilisant css, que ce soit en ligne ou dans la feuille de style, de sorte qu'il est caché par défaut.

<div style="display:none;">

Ou, vous pouvez charger le div sans contenu, puis le remplir via votre javascript avec e.innerHTML = "certains contenus" ou ajax?

Source

2013-10-03 15:46:43 Amos

Comment rendre une div cachée par défaut en utilisant javascript?

Répondre

Questions connexes