Montrer JavaScript et masquer les éléments en cliquant

Excusez mon ignorance, je n'ai aucune idée de ce que je fais, mais j'essaie.

J'ai tenté de le découvrir en recherchant, mais il n'a donné qu'un résultat fonctionnel dans jQuery. Puisqu'il s'agit d'une section aussi petite, je pense qu'il serait préférable d'utiliser simplement JavaScript vanilla au lieu de charger toute la bibliothèque jQuery.

Est-ce que quelqu'un sait comment / si je peux accomplir la même fonctionnalité ci-dessous, mais avec un JavaScript normal ? Fondamentalement, ce que j'essaie de faire est lorsque "butt1" est cliqué, la liste désordonnée "liens" sera cachée et la div "box1" sera affichée:

<html> <head> <title>qwerty</title> <style type="text/css"> .box1 {background: red;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $("#butt1").live("click", show_box1); function show_box1(event) { $("#links").css("display", "none"); $(".box1").css("display", "inline"); } </script> </head> <body> <ul id="links"> <li id="butt1"><a href="#">blah</a></li> <li id="butt2"><a href="#">blah</a></li> <li id="butt3"><a href="#">blah</a></li> </ul> <div class="box1" style="display: none;">You clicked butt1!</div> </body> </html>

Voici un lien vers ce qui précède comme exemple de travail: http://jsbin.com/umitef/4/ – c'est la fonctionnalité que je souhaite reproduire.

Mes remerciements à tous ceux qui prennent un moment … 🙂

Vous pouvez utiliser getElementById pour sélectionner un élément à l'aide d'un id (équivalent à $("#something") ) et getElementsByClassName pour sélectionner des éléments en fonction du nom de la classe (équivalent à $(".something") ) et vous pouvez utiliser le style Propriété pour définir le style d' display (équivalent à la méthode .css ):

 var boxes = document.getElementsByClassName("box1"); document.getElementById("butt1").onclick = function() { document.getElementById("links").style.display = "none"; for(var i = 0; i < boxes.length; i++) { boxes[i].style.display = "inline"; } }

Notez cependant que getElementsByClassName n'est pas pris en charge dans les versions antérieures d'IE, c'est pourquoi jQuery peut être utile même pour les petites choses – il raccourcit le code et déclenche toutes les différences ennuyeuses du navigateur.

En outre, une différence majeure entre le code ci-dessus et votre jQuery est l'utilisation de la méthode .live jQuery, qui surveille le DOM et attache l'événement à n'importe quel élément correspondant au sélecteur, que ce soit dans le DOM déjà ou qu'il soit ajouté dans le avenir. Avec le code ci-dessus, s'il n'y a pas déjà un élément avec id "butt1" dans le DOM lorsque le code est exécuté, vous obtiendrez un TypeError, car getElementById renverra null .

 $("#links").css("display", "none");

Pourrait devenir:

 document.getElementById('links').style.display = 'none';

De façon réaliste, le chargement de jQuery a beaucoup de sens puisque vous le faites à partir de Google CDN. Beaucoup de sites utilisent cela, donc il y a une bonne probabilité que, à un certain moment, certains de vos utilisateurs l'aient déjà téléchargé. De plus, jQuery compressé est un très petit téléchargement. Tant et si bien que la lisibilité du code de style jQuery en vaut la peine.

Bien, alors que le moyen le plus simple est de le faire jQuery style, vous pouvez toujours reproduire cette fonctionnalité en Javascript.

La clé ici est la fonction getElementById pour saisir l'élément spécifique que vous souhaitez manipuler, puis vous définissez simplement la propriété element.style.display sur 'none' lorsque vous souhaitez le masquer et 'block' ou 'inline' lorsque vous souhaitez Montre-le (selon le contexte)

Voici ma fissure …

 <head> <title>qwerty</title> <style type="text/css"> #box1 {background: red;} #box2 {background: blue;} #box3 {background: yellow;} </style> <script type="text/javascript"> function toggle_visibility(id) { var ul = document.getElementById('links'); var box = document.getElementById(id); if(ul.style.display == 'none') { ul.style.display = 'block'; box.style.display = 'block'; } else { ul.style.display = 'none'; box.style.display = 'block'; } } </script> </head> <body> <ul id="links"> <li id="butt1"><a href="#" onclick="toggle_visibility('box1');">blah</a></li> <li id="butt2"><a href="#" onclick="toggle_visibility('box2');">blah</a></li> <li id="butt3"><a href="#" onclick="toggle_visibility('box3');">blah</a></li> </ul> <div id="box1" style="display: none;">You clicked butt1!</div> <div id="box2" style="display: none;">You clicked butt2!</div> <div id="box3" style="display: none;">You clicked butt3!</div> </body> </html>

La version comprimée de Jquery est de seulement 31 Ko. Chargez-le à l'aide de http://code.google.com/apis/libraries/devguide.html#jquery . Vous ne devez pas charger l'interface utilisateur si vous n'en avez pas besoin. La quantité de code pour faire ce que vous voulez ne vaut pas la facilité de Jquery. De plus, comme JamWaffles, a déclaré s'il y avait d'autres endroits que vous utiliserez Jquery, il suffit de le charger et de l'utiliser.

Il est évident que vous n'avez qu'une seule boîte

 window.onload = function() { var links = document.getElementById("links"), box1 = document.getElementsByClassName("box1")[0]; links.onclick = function() { links.style.display = "none"; box1.style.display = "inline"; }; };