Afficher un div avec j'appuie sur un <a>

Fermé
GASTON22 Messages postés 204 Date d'inscription mercredi 27 mars 2013 Statut Membre Dernière intervention 23 décembre 2019 - Modifié par GASTON22 le 1/10/2015 à 23:47
 segatasenshiro - 2 oct. 2015 à 01:45
Bonjour,

J'essaie depuis un moment d'afficher des div différents quand j'appuie sur des <a> chaque <a> correspond a un div et quand je click un div s'affiche et l'autre disparait.

j'ai trouvé plusieurs codes sur internet mais ne correspondent pas vraiment, le plus proche c'est celui la:

<script type="text/javascript">
 function Show_Div(Div_id) {
  if (false == $(Div_id).is(':visible')) {
   $(Div_id).show(250);
  }
  else {
   $(Div_id).hide(250);
  }
 }
</script>

<div id="div_1" style="display: none;"></div>
<div id="div_2" style="display: none;"></div>
<div id="div_3" style="display: none;"></div>

    <input type="button" value="Click me to show or hidden div" onclick="Show_Div(div_1)" />
<input type="button" value="Click me to show or hidden div" onclick="Show_Div(div_2)" />
<input type="button" value="Click me to show or hidden div" onclick="Show_Div(div_3)" />



le probleme dans ce code c'est que les div restent affiché si je reclick pas sur son bouton et moi je veux que quand je click sur un <a> ou un bouton (pareil) ca enlève l'ancien div et met le nouveau.

svp aidez moi je suis coincé... et c'est urgent.

1 réponse

segatasenshiro
2 oct. 2015 à 01:45
Salut,
2 solutions simples qui fonctionneront:
1_faire une fonction par div à afficher, donc masquer les autres dans chaque fonction.
2_utiliser un seul div et remplir son contenu en fonction du bouton appuyé(ce qui remplacera l'ancien contenu).

La deuxième solution est la plus pratique car elle nécessitera qu'une seule instruction quand la première en nécessite 3(afficher un div, masquer les 2 autres).

Si c'est un code trouvé et employé sans le comprendre vous devriez commencer par apprendre les bases et vous pourrez faire vos propres codes ;)

Il y aussi des solutions qui sont encore mieux mais qui nécessiteront un peu de réflexion pour les mettre en place et auront l'avantage de pouvoir s'adapter sans changer le code si vous voulez avoir 2 div à remplir/afficher ou 10 ou 30 en utilisant la même fonction. C'est par exemple le cas de la 2ème solution en mettant en paramètre le contenu à utiliser dans le div plutôt que dans la fonction.

Remarque: vous utilisez la balise input qui est une balise de formulaire, donc n'est pas correcte sémantiquement/structurellement.
Vous pouvez comme vous l'indiquez utiliser un lien en indiquant en valeur href="#" ou une balise <button></button> qui peut être utilisé dans et hors formulaire.
Pour un lien comme ceci:
<a href="#" onclick="mafonction()" >clicquez moi</a>
ou
<button onclick="mafonction">cliquez moi</button>

Autre remarque: puisque vous utilisez JQuery(et même sans) il est plus correct(plus facile à lire et surtout modifier, mettre à jour) d'utiliser un gestionnaire d'événement plutôt que d'utiliser le paramètre onclick dans la balise.

En javascript 'pur' on utilise addEventListener() et en JQuery la fonction se nomme click()

Ici les références avec exemples d'utilisation pour peu que vous ayez les bases de javascript et de JQuery:

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

https://api.jquery.com/click/
0