A voir également:
- Probleme de creation menu et affichage repons
- Menu déroulant excel - Guide
- Menu contextuel windows 11 retrouver l'affichage classique - Guide
- Creation compte gmail - Guide
- Création compte google - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
3 réponses
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 10:53
20 janv. 2011 à 10:53
Bonjour,
Sinon il y a une autre option, celle d'utiliser l'évènement "onClick" et la propriété CSS "display".
Cela fonctionne surtout bien pour peu de liens (si y'a 30 liens ça risque de faire beaucoup de code).
Le lien:
<ul><li>
<a onClick="javascript: document.getElementById('div_pokemon_1').style.display='block';document.getElementById('div_pokemon_2').style.display='none';">pokemon1</a></li>
<li><a onClick="javascript: document.getElementById('div_pokemon_1').style.display='none';document.getElementById('div_pokemon_2').style.display='block';">pokemon2</a></li></ul>
Là ça fait une liste avec 2 liens. Plus y'a de liens, plus ça devient long car à chaque fois il faut un bout de code qui dit de rendre visible le contenu spécifié, et des autres bouts de code pour dire de rendre invisible les autres contenus.
(En gros ça dit au navigateur "quand on clique là, tu affiches ça mais tu caches ça").
Ensuite, il faut faire tes div de contenu, en spécifiant leur identifiant:
<div style="display:block" id="div_pokemon_1">
blablabla
</div>
<div style="display:none" id="div_pokemon_2">
blablabli
</div>
le style ici dit juste comment doivent apparaître les div avant qu'on clique sur les liens (donc en gros tu mets block pour celle qui doit s'afficher, et none pour les autres)
Sinon il y a une autre option, celle d'utiliser l'évènement "onClick" et la propriété CSS "display".
Cela fonctionne surtout bien pour peu de liens (si y'a 30 liens ça risque de faire beaucoup de code).
Le lien:
<ul><li>
<a onClick="javascript: document.getElementById('div_pokemon_1').style.display='block';document.getElementById('div_pokemon_2').style.display='none';">pokemon1</a></li>
<li><a onClick="javascript: document.getElementById('div_pokemon_1').style.display='none';document.getElementById('div_pokemon_2').style.display='block';">pokemon2</a></li></ul>
Là ça fait une liste avec 2 liens. Plus y'a de liens, plus ça devient long car à chaque fois il faut un bout de code qui dit de rendre visible le contenu spécifié, et des autres bouts de code pour dire de rendre invisible les autres contenus.
(En gros ça dit au navigateur "quand on clique là, tu affiches ça mais tu caches ça").
Ensuite, il faut faire tes div de contenu, en spécifiant leur identifiant:
<div style="display:block" id="div_pokemon_1">
blablabla
</div>
<div style="display:none" id="div_pokemon_2">
blablabli
</div>
le style ici dit juste comment doivent apparaître les div avant qu'on clique sur les liens (donc en gros tu mets block pour celle qui doit s'afficher, et none pour les autres)
au merci beaucoup tu m'as donné une sérieuse contribution qui me permet d'avancer dans mon projet ^^
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 10:59
20 janv. 2011 à 10:59
je t'en prie ^^
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 11:10
20 janv. 2011 à 11:10
Ah et sinon il y a aussi une autre option, sans javascript:
Il suffit de mettre une ancre à chaque début de div pokemon. Si ta div principale est en "overflow:hidden", alors uniquement le texte concerné s'affiche, et le reste est trop bas et dépasse de la div, et est donc invisible.
Pour ça il faudrait une structure de ce genre:
<div id="div_pokemon_principale">
<div id="div_pokemon_1">
<h2 id="pok1">POKEMON 1 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
<div id="div_pokemon_2">
<h2 id="pok2">POKEMON 2 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
</div>
etc
Il faut la div div_vide_500px pour que le texte suivant soit poussé en bas, et donc invisible.
Il suffit de rajouter dans le CSS:
div.div_vide_500px{
height:500px;
}
et aussi, dans le CSS pour la div générale
div#div_pokemon_principale{
overflow:hidden;
}
Il suffit de mettre une ancre à chaque début de div pokemon. Si ta div principale est en "overflow:hidden", alors uniquement le texte concerné s'affiche, et le reste est trop bas et dépasse de la div, et est donc invisible.
Pour ça il faudrait une structure de ce genre:
<div id="div_pokemon_principale">
<div id="div_pokemon_1">
<h2 id="pok1">POKEMON 1 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
<div id="div_pokemon_2">
<h2 id="pok2">POKEMON 2 titre</h2>
blabla bla
<div class="div_vide_500px"></div>
</div>
</div>
etc
Il faut la div div_vide_500px pour que le texte suivant soit poussé en bas, et donc invisible.
Il suffit de rajouter dans le CSS:
div.div_vide_500px{
height:500px;
}
et aussi, dans le CSS pour la div générale
div#div_pokemon_principale{
overflow:hidden;
}
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 11:12
20 janv. 2011 à 11:12
et les liens ici seraient donc
http://www.......blablabla...lapagedetonsite.php#div_pokemon_1
http://www.......blablabla...lapagedetonsite.php#div_pokemon_2
etc
http://www.......blablabla...lapagedetonsite.php#div_pokemon_1
http://www.......blablabla...lapagedetonsite.php#div_pokemon_2
etc
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 11:58
20 janv. 2011 à 11:58
je ne comprends pas tout là, les liens ne sont pas simplement dans le HTML ? De simples liens hypertexte, qui mènent à la page actuelle mais en ajoutant l'identifiant de la div à la fin.
tout simplement que je gere pas trop bien le javasript et que je pensais pouvoir adapter ton idée en php qui est plus dans mes cordes :$ ( je veux absolument du php en faite car le javascript on peut le desactiver et sa me gene car mon projet est un peu noté et le php est infaible meme si il est un peu limiter ^^ parfois.
olivierrobins
Messages postés
225
Date d'inscription
lundi 17 janvier 2011
Statut
Membre
Dernière intervention
26 janvier 2012
49
20 janv. 2011 à 12:32
20 janv. 2011 à 12:32
ah ok, malheureusement je ne m'y connais pas assez bien ni en php ni en javascript pour t'aider sur ce point. Mais la 2e option que j'ai proposé n'utilise pas de javascript, uniquement du html (qu'on peut mettre dans un fichier php..)