HTML changer le div principal avec des liens

Fermé

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 - 15 sept. 2014 à 18:23
Hubert - 16 sept. 2014 à 22:10

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 voir également:

HTML changer le div principal avec des liens
Changer dns - Guide
Piratage facebook changer mot de passe - Guide
Changer clavier qwerty en azerty - Guide
Changer profil principal netflix - Guide
Créer un lien pour partager des photos - Guide

9 réponses

Réponse 1 / 9

hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
15 sept. 2014 à 18:25

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

Réponse 2 / 9

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 6
15 sept. 2014 à 20:52

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

Réponse 3 / 9

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 6
15 sept. 2014 à 21:06

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 ;)

Réponse 4 / 9

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 6
15 sept. 2014 à 21:11

ce lien devrais être actif 1/2 j j'ai fais un exemple :: http://royaldeveloppement.url.ph/TEST/test.html

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
15 sept. 2014 à 21:24

Ah d'accord, en effet, j'avais mal compris ce que vous vouliez faire, toutes mes excuses !

Bonne continuation à vous !

Réponse 6 / 9

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 6
16 sept. 2014 à 17:28

merci

Réponse 7 / 9

electroking Messages postés 234 Date d'inscription dimanche 14 septembre 2014 Statut Membre Dernière intervention 22 juin 2021 6
16 sept. 2014 à 17:29

si vous vous y connaissez en BATCH j'ai un autre petit souci :) https://forums.commentcamarche.net/forum/affich-30793742-les-espaces-en-batch

Réponse 8 / 9

hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
16 sept. 2014 à 18:36

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"

Réponse 9 / 9

Hubert
16 sept. 2014 à 22:10

<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>

Discussions similaires

Changer d'écran principal : inverser écran 1 et 2

Espace en HTML

Partition GPT ou Secteur de Démarrage Principal (MBR) ?

Discussions similaires

Newsletters