HTML changer le div principal avec des liens
Salut à tous, j'aimerais savoir comment changer le corps de la page avec des liens (3 préciséments ) par exemple :
<a href="" class="lien1">PAGE1</a>
<a href="" class="lien2">PAGE2</a>
<a href="" class="lien3">PAGE3</a>
<div class="div1">CORPS1</a>
<div class="div2">CORPS2</a>
<div class="div3">CORPS3</a>
je veux que quand je clique sur un des liens, il cache le div affiché et montre le div correspondant. est-ce possible ? Merci d'avance
<a href="" class="lien1">PAGE1</a>
<a href="" class="lien2">PAGE2</a>
<a href="" class="lien3">PAGE3</a>
<div class="div1">CORPS1</a>
<div class="div2">CORPS2</a>
<div class="div3">CORPS3</a>
je veux que quand je clique sur un des liens, il cache le div affiché et montre le div correspondant. est-ce possible ? Merci d'avance
9 réponses
-
Bonsoir,
Je ne suis pas sûr d'avoir compris ce que vous voulez faire mais il me semble plus simple d'utiliser des ancres -
Non en fait les ancres vont m'amener à un endroit de la page; mais mois je veux que le lien fasse changer le div de la page en faisant disparaître les autres
-
j'ai cherché , j'ai fais un peu de script et j'ai trouvé :)
voila en gros le code que je voulais :
<head>
<script>
function vaEtVient(){
if(document.getElementById('invisible').style.display == 'none'){
document.getElementById('invisible').style.display = 'block';
document.getElementById('invisibled').style.display = 'none';
}
else {
document.getElementById('invisible').style.display = 'none';
}
}
</script>
<script>
function vaEtVientd(){
if(document.getElementById('invisibled').style.display == 'none'){
document.getElementById('invisibled').style.display = 'block';
document.getElementById('invisible').style.display = 'none';
}
else {
document.getElementById('invisibled').style.display = 'none';
}
}
</script>
</head>
<body>
<a href='javascript: vaEtVient()'>Affiches-moi</a><br>
<a href='javascript: vaEtVientd()'>Affiches-moi2</a><br>
<div style='display:none;' id='invisible'>
Mon Contenu caché
</div>
<div style='display:none;' id='invisibled'>
Mon Contenu caché2
</div>
</body>
Sa ouvre un div avec un lien et l'autre avec un autre lien ;) -
ce lien devrais être actif 1/2 j j'ai fais un exemple :: http://royaldeveloppement.url.ph/TEST/test.html
-
Ah d'accord, en effet, j'avais mal compris ce que vous vouliez faire, toutes mes excuses !
Bonne continuation à vous ! -
merci
-
si vous vous y connaissez en BATCH j'ai un autre petit souci :) https://forums.commentcamarche.net/forum/affich-30793742-les-espaces-en-batch
-
Bonjour, je suis désolé, je ne peux pas vous aider, je n'ai aucune connaissance n BATCH
J'espère que vous trouverez la solution de votre nouveau problème.
PS: Si celui-ci est résolu n'hésitez pas à l'indiquer en cliquant sur "Marquer comme résolu" -
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function cache(rouge)
{document.getElementById(rouge).style.visibility="hidden"}
function montre(rouge)
{document.getElementById(rouge).style.visibility="visible"}
function cache(bleu)
{document.getElementById(bleu).style.visibility="hidden"}
function montre(bleu)
{document.getElementById(bleu).style.visibility="visible"}
function cache(noir)
{document.getElementById(noir).style.visibility="hidden"}
function montre(noir)
{document.getElementById(noir).style.visibility="visible"}
</script>
</head>
<body>
<div id="rouge" style="position:absolute; width:670px; height:115px; z-index:3; background-color: #FF0000; border: 1px none #000000; visibility: visible;"></div>
<div id="bleu" style="position:absolute; width:670px; height:115px; z-index:2; background-color: #0000FF; border: 1px none #000000; visibility: hidden;"></div>
<div id="noir" style="position:absolute; width:670px; height:115px; z-index:1; background-color: #000000; border: 1px none #000000; visibility: hidden;"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span onclick="cache('rouge');montre('bleu')" >montre bleu</span></p>
<p> </p>
<p><span onclick="cache('bleu');montre('noir')" >montre noir</span></p>
<p> </p>
<p><span onclick="cache('noir');montre('rouge')" >montre rouge</span></p>
</body>
</html>
