jQuery Girl
  1. jQuery Girl
  3. Afficher / masquer plusieurs divs à l’aide de JavaScript
Intereting Posts
HTML Mutli Select Ne pas publier de valeurs Retour à PHP s’il n’y a pas de connexion internet, cache l’iframe Quel est le moyen le plus simple de répliquer la zone de texte des balises utilisée dans la page de questions sur la superposition? Diagramme de GANTT en haut de gamme – nécessité d’autoriser la catégorie sans données Dans quelles circonstances le document.ready () de jQuery n’est-il pas requirejs? Création d’applications de bureau par JQuery Mobile Utilisation de Jquery promise () dans la boucle ‘for’ pour attendre la fin de l’effet avant de commencer l’effet suivant Comment faire un rendu partiel sur la méthode de succès jQuery ajax avec rails 3 HTML Jquery déplace l’image à gauche et à droite en survol de la souris jQuery slideToggle saute Comment mettre à jour une variable de contexte de modèle django après un appel AJAX? Comment positionner un hover div en fonction de la position de l’élément Désélectionner une option à l’aide de jQuery sur un sélecteur de sélection Bootstrap Est-ce une bonne pratique de stocker le jeton csrf dans une balise méta? Mise à jour automatique du champ de saisie avec math en utilisant jquery?

Afficher / masquer plusieurs divs à l’aide de JavaScript

J’aimerais afficher plusieurs divs en cliquant sur un lien respectif, ce que j’ai déjà réalisé, mais j’aimerais également créer une classe de liens qui masque également le div.

J’espère que quelqu’un pourra produire une version modifiée du script suivant, afin de programmer une classe de liens pour masquer une div, à l’aide de cibles?

Voici le jsFiddle sur lequel je travaille: http://jsfiddle.net/XwN2L/1163/

HTML: 

 Option 1 Option 2 Option 3 Option 4 
 
Lorum Ipsum 1
 
Lorum Ipsum 2
 
Lorum Ipsum 3
 
Lorum Ipsum 4
​

JavaScript: 

  $('.targetDiv').hide(); $('.show').click(function () { $('.targetDiv').hide(); $('#div' + $(this).attr('target')).show(); });

Merci d’avance.

METTRE À JOUR:

http://jsfiddle.net/XwN2L/1180/

Cela semblait fonctionner, désolé si je n’étais pas assez clair dans la question.

HTML: 

  
 Option 1 Option 2 Option 3 Option 4 Close 1 Close 2 Close 3 Close 4 
 
Lorum Ipsum 1
 
Lorum Ipsum 2
 
Lorum Ipsum 3
 
Lorum Ipsum 4
​

JavaScript: 

  $('.targetDiv').hide(); $('.show').click(function () { $('.targetDiv').hide(); $('#div' + $(this).attr('target')).show(); }); $('.hide').click(function () { $('#div' + $(this).attr('target')).hide(); });

Merci encore pour votre aide!

Je ne sais pas si c’est ce que vous voulez, mais vous pouvez jeter un coup d’œil à ce violon ..

http://jsfiddle.net/XwN2L/1165/

créer un lien avec la classe hide ..

et appelez la fonction click 

 $('.hide').click(function () { $('.targetDiv').hide(); });

Vous pouvez le faire comme ceci aussi, vous pouvez donc basculer l’option au lieu d’avoir un bouton supplémentaire pour tout cacher. 

 $('.targetDiv').hide(); $('.show').click(function () { $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide(''); });​

http://jsfiddle.net/W3HtS/1/

Lorsque la balise a.show contient un href , l’atsortingbut target vous utilisez déclenchera l’ouverture d’une nouvelle fenêtre ou d’un nouvel onglet. Je conseillerais d’utiliser un atsortingbut de données ici.

Si vous pouvez utiliser CSS3, envisagez une solution CSS uniquement. Vous ne savez pas ce que vous voulez dire, mais jsfiddle contient un exemple dans lequel une action mousedown montre une boîte de dialog ressemblant à une info-bulle utilisant l’atsortingbut data pour son contenu.

Le css dans cet exemple: 

 a.show:active:after{ position:absolute; color:green; margin-top:1.0em; margin-left:-1em; background: white; z-index:2; content: 'Lorem Ipsum 'attr(data-target); border: 1px solid #999; padding: 3px; }