11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher un <div> et masquer tous les autres

Pages :
Bonjour,

Je recherche un script qui permet d'afficher un div et de masquer tous les autres en cliquant sur un lien, est ce possible ?

Exemple :

lien #1
lien #2
lien #3

<div>contenu #1</div>
<div>contenu #2</div>
<div>contenu #3</div>

Quand on clique sur le lien #1 le div #1 apparait et les deux autres div se ferment. Auriez vous une idée ?

Merci
Modifié par Gazza (05 Feb 2010 - 11:46)
Bonjour,

En donnant un ID à chaque div, c'est possible.

Au chargement de la page (ou au clic) tu masque les éléments div via JS (et pas directement en CSS, sinon cela peut causes de sérieux problèmes d'accessibilité) ; puis tu affiche le div spécifique via son ID.
Merci Laurie Anne par contre je ne sais pas du tout comment m'y prendre pour le JS.
J'ai trouvé ce code mais cela ne correspond pas tout à fait, il faudrait qu'en cliquant sur le lien 2 cela affiche la div 2 et ferme les autres :


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Exemple</title>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</SCRIPT>

</head>

<body>

<a href="javascript:visibilite('block1');">afficher/masquer</a>
<a href="javascript:visibilite('block2');">afficher/masquer</a>

<div id="block1" style="display:none"> Contenu de ma div </div>
<div id="block2" style="display:none"> Contenu de ma div 2</div>

</body>

</html>

Modifié par Gazza (03 Feb 2010 - 15:54)
Pour ce que tu souhaites faire, jQuery est une bonne solution.
Il est facile à mettre en place et on obtient avec de bons effets visuels Smiley smile

Bon courage !

Lu
Hello Gazza et bienvenue sur le forum Smiley smile ,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Gazza a écrit :
Merci Luleen,

Mais je ne trouve pas mon bonheur dans JQuery...

Essaye quelque chose comme ceci:
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
<script>
  $(function(){
    var divs = $("div");
    divs.not("#box1").hide();
    $("a").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("href")).show();
      return false;
    });
  });
</script>

<ul>
  <li><a href="#box1">Lien #1</a></li>
  <li><a href="#box2">Lien #2</a></li>
  <li><a href="#box3">Lien #3</a></li>
</ul>
<div id="box1">Contenu #1</div>
<div id="box2">Contenu #2</div>
<div id="box3">Contenu #3</div>
Si ton problème est résolu, n'oublie pas d'éditer ton premier message en le signifiant d'un [Résolu] dans le titre Smiley smile
Alors après un test je m'apperçois que le script cache toutes les autres div de la page, ce qui n'est pas trés cool, comment faire ?

Merci
Gazza a écrit :
Alors après un test je m'apperçois que le script cache toutes les autres div de la page, ce qui n'est pas trés cool, comment faire ?

Merci

Dans la ligne var divs = $("div");, tu dois remplacer "div" par un sélecteur CSS approprié ne ciblant que les éléments voulus. Tu peux par exemple leur appliquer une même classe pour te faciliter la vie.
désolé mais j'essaye avec une class mais je n'y arrive pas, ça donnerai quoi comme code ?
Gazza a écrit :
désolé mais j'essaye avec une class mais je n'y arrive pas, ça donnerai quoi comme code ?

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
<script>
  $(function(){
    var divs = $(".boxes");
    divs.not("#box1").hide();
    $("a").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("href")).show();
      return false;
    });
  });
</script>

<ul>
  <li><a href="#box1">Lien #1</a></li>
  <li><a href="#box2">Lien #2</a></li>
  <li><a href="#box3">Lien #3</a></li>
</ul>
<div class="boxes" id="box1">Contenu #1</div>
<div class="boxes" id="box2">Contenu #2</div>
<div class="boxes" id="box3">Contenu #3</div>
Pages :
Sujet clos
Aller à