Afficher/masquer le contenu en utilisant javascript

Je souhaite avoir un lien hypertexte "Je veux créer un package personnalisé" sur ma page Web. Cliquer sur "Je veux créer un paquet personnalisé" devrait cacher l'hypertexte et afficher un DIV désiré dans mon cas, id = "hide2".Afficher/masquer le contenu en utilisant javascript

Ce que je droit est maintenant:

1: javascript correspondant

<script type="text/javascript"> 
function load1() 
{ 
    document.getElementById('hide2').style.display='none'; 
    return false; 
} 
function toggle() 
{ 
    document.getElementById('hide1').style.display='none'; 
    document.getElementById('hide2').style.display=''; 

} 
</script>

2. Code correspondant HTML:

<body onLoad="load1()"> 
<a onclick="toggle()" href="" id="hide1">I want to create a custom package</a> 
    <div id="hide2"> 
    <p><input type="radio" name="">Name your price: 
    <input type="text" width="10px">.00($299 minimum)<br> 
    </p> 
</div> 
</body>

Ce code fonctionne presque ok, en cliquant sur l'hypertexte cache le lien et affiche "hide2" div. En dehors du fait qu'il retourne à son mode body.onLoad (c'est-à-dire hypertexte montré et div caché) juste après quelques millisecondes le div "hide2" vient à l'existence.
S'il vous plaît soyez généreux en suggérant où j'ai fait erreur, en plus de fournir une solution. Merci d'avance.

Source

2013-08-01 Jinandra

duplication possible de [javascript hide/show element] (http://stackoverflow.com/questions/6242976/javascript-hide-show-element) – oleq

Au lieu d'utiliser 'load1', vous pouvez simplement ajouter l'affichage' style = ' : none "' à l'élément 'hide2'. Aucune raison d'utiliser javascript supplémentaire sur le chargement si vous pouvez simplement l'appliquer directement avec CSS –

Merci @KevinJantzer pour votre suggestion. oui cela pourrait être une façon de le faire. – Jinandra

Vous pouvez changer le script de la balise body, et envisager d'utiliser jQuery, et ce pour la peau initiale:

$(document).ready(function (
{ 
//Script here 
});

Sinon, la raison derrière le problème que vous voyez est que vous aren n'annule pas la publication de la page. Pensez à utiliser comme votre href:

href="javascript:void(0);"

Source

2013-08-01 20:01:16

Le problème est que votre lien contient href="" - le navigateur rechargera alors la page lorsque vous aurez cliqué dessus. Changez votre onclick en toggle(); event.preventDefault(); et il devrait empêcher le rechargement. Vous devriez aussi probablement changer le lien pour avoir href="#", ce qui amènera le navigateur à sauter en haut de la page s'il est déclenché par erreur, plutôt que de recharger.

Source

2013-08-01 19:59:27 Jules

Alternativement; sa fonction toggle() ''' pourrait renvoyer une valeur de' false' – Indy

Vous pouvez également simplement supprimer l'attribut 'href'. Ou supprimez le onclick et faites ceci: 'href =" javascript: toggle(); return false "' –

Jules a souligné le principal problème dans votre code, mais le code n'était pas très joli autrement non plus, donc je pris la liberté de refactorisation votre code: http://jsfiddle.net/CgQgD/2/ :)

Fondamentalement, vous voulez avoir caché défini comme une classe au lieu de manipuler les valeurs CSS directement à partir de JS, de cette façon, vous pouvez facilement supprimer, ajouter et vérifier la classe cachée.

.hidden { display: none; }

Cela signifie également que vous pouvez facilement avoir un élément caché d'abord sans utiliser CSS en ligne, ce qui rend votre gestionnaire onload inutile (vous utiliseriez normalement aussi window.addEventListener('load', ...); à la place, si vous avez vraiment utiliser l'événement onload) .

Source

2013-08-01 20:19:42 quinnirill

Afficher/masquer le contenu en utilisant javascript

Répondre

Questions connexes