Menu

Boutons pour modifier contenue d'une page [Résolu]

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- - Dernière réponse : astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- 31 août 2018 à 21:57
Bonjour,

j'ai crée une page de site simple, qui comprend une barre de menu avec 5 boutons ( balise <a href="..."> ).
comment je peut faire pour que chaque bouton modifie l’intégralité du contenue de cette même page ?
pour le moment mis a part le background elle est encore vierge.

je me débrouille plutôt bien en HTML/CSS mais pas du tout en JS donc si vous pouvez me soutenir la dessus si besoin, ce ne sera pas de refus .

merci bien.

Afficher la suite 

2 réponses

Messages postés
25817
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juin 2019
1666
0
Merci
Bonjour,

chaque bouton modifie l’intégralité du contenue de cette même page

Modifier avec quoi ?
Et... sans changer de page ?
Car les balises <a> servent (le plus souvent) de liens pour naviguer de pages en pages....

Si par contre tu veux modifier du contenu dans ta page, tu peux, en effet, utiliser du javascript.
Par exemple :
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Test</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function DireBonjour(){
        var zoneMessage = document.getElementById('zoneMessage');
        zoneMessage.innerHTML = " Bonjour ....  :-) ";
        return false;
     }
    </script>
  </head>
  <body id="mbody">
    <a href="#" onclick="return DireBonjour();">Hello</a>
    
    <div id="zoneMessage">
    </div>
  </body>
</html>

astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
re-bonjour Jordane,

effectivement en temps normal j'aurais fait un lien vers une seconde page pour chacun de mes boutons.
mais la c'est justement ce que je veut éviter. je désire modifier le contenue (presque intégrale) du body simplement en appuyant sur mes boutons.

du coup il ne s’agit pas de simplement modifier le contenue d'une div mais également de définir quel boutons est associé a quel contenue, puis de l'afficher.

autrement j'aurais utiliser un script de ce type :
  <script type="text/javascript">
    function switchDisplay() {
    var defaut = document.getElementById('div1');
    var autre = document.getElementById('div2');
      
    defaut.style.display = (defaut.style.display == 'none' ? '' : 'none');
    autre.style.display = (autre.style.display == 'none' ? '' : 'none'); }
  </script>
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
ceci dit ... ton script avec un bout du miens ça peut rendre quelque chose de pas trop mal ...

je teste ça,

i keep you update
Commenter la réponse de jordane45
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2
0
Merci
bon j'ai fini par réussir, le résulta est la, mais niveau code c'est clairement pas ouf ...
si un dev JS passe par la et a du temps a perdre, je serais reconnaissant si il peut optimisé tout ça .
car la c'est moche ... voir même très moche, première fois que je code en JS .....

<html lang="fr">
  <head>
    <title>Swap multi-content div</title>
    <meta charset="utf-8">
    
    <script type="text/javascript">
     function divdef()
    {
      var defaut = document.getElementById('ddiv');
      var one = document.getElementById('div1');
      var two = document.getElementById('div2');
      var three = document.getElementById('div3');
      var four = document.getElementById('div4');
      
      defaut.style.display = (defaut.style.display == 'none' ? '' : '');
      one.style.display = (one.style.display == 'none' ? 'none' : 'none');
      two.style.display = (two.style.display == 'none' ? 'none' : 'none');
      three.style.display = (three.style.display == 'none' ? 'none' : 'none');
      four.style.display = (four.style.display == 'none' ? 'none' : 'none');
     }
     function divone()
    {
      var defaut = document.getElementById('ddiv');
      var one = document.getElementById('div1');
      var two = document.getElementById('div2');
      var three = document.getElementById('div3');
      var four = document.getElementById('div4');
      
      defaut.style.display = (defaut.style.display == 'none' ? 'none' : 'none');
        one.style.display = (one.style.display == 'none' ? '' : '');
      two.style.display = (two.style.display == 'none' ? 'none' : 'none');
      three.style.display = (three.style.display == 'none' ? 'none' : 'none');
      four.style.display = (four.style.display == 'none' ? 'none' : 'none');
     }
     function divtwo()
    {
      var defaut = document.getElementById('ddiv');
      var one = document.getElementById('div1');
      var two = document.getElementById('div2');
      var three = document.getElementById('div3');
      var four = document.getElementById('div4');
      
      defaut.style.display = (defaut.style.display == 'none' ? 'none' : 'none');
        one.style.display = (one.style.display == 'none' ? 'none' : 'none');
      two.style.display = (two.style.display == 'none' ? '' : '');
      three.style.display = (three.style.display == 'none' ? 'none' : 'none');
      four.style.display = (four.style.display == 'none' ? 'none' : 'none');
     }
     function divthree()
    {
      var defaut = document.getElementById('ddiv');
      var one = document.getElementById('div1');
      var two = document.getElementById('div2');
      var three = document.getElementById('div3');
      var four = document.getElementById('div4');
      
       defaut.style.display = (defaut.style.display == 'none' ? 'none' : 'none');
        one.style.display = (one.style.display == 'none' ? 'none' : 'none');
      two.style.display = (two.style.display == 'none' ? 'none' : 'none');
      three.style.display = (three.style.display == 'none' ? '' : '');
      four.style.display = (four.style.display == 'none' ? 'none' : 'none');
     }
     function divfour()
    {
      var defaut = document.getElementById('ddiv');
      var one = document.getElementById('div1');
      var two = document.getElementById('div2');
      var three = document.getElementById('div3');
      var four = document.getElementById('div4');
      
      defaut.style.display = (defaut.style.display == 'none' ? 'none' : 'none');
        one.style.display = (one.style.display == 'none' ? 'none' : 'none');
      two.style.display = (two.style.display == 'none' ? 'none' : 'none');
      three.style.display = (three.style.display == 'none' ? 'none' : 'none');
      four.style.display = (four.style.display == 'none' ? '' : '');
     }
    </script>
  </head>
  
  <body>
    <a href="#" onclick="javascript:divdef();">default</a>
    <a href="#" onclick="javascript:divone();">boutton 1</a>
    <a href="#" onclick="javascript:divtwo();">boutton 2</a>
    <a href="#" onclick="javascript:divthree();">boutton 3</a>
    <a href="#" onclick="javascript:divfour();">boutton 4</a>
    
    
    <div id="ddiv" class="pictu">
      you have press button Default = this is the default display
      <img src="https://images.unsplash.com/photo-1530984575892-9c76ba2d187e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b786d40cedaf07f80296eb033008d5b3&auto=format&fit=crop&w=634&q=80">
    </div>
    <div id="div1" class="pictu" style="display:none;">
     you have press button 1 = this is the display n°1
      <img src="https://images.unsplash.com/photo-1528495612343-9ca9f4a4de28?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f38859ca09733768682117d67c23d575&auto=format&fit=crop&w=1267&q=80">
    </div>
    <div id="div2" class="pictu" style="display:none;">
     you have press button 2 = this is the display n°2
     <img src="https://images.unsplash.com/photo-1528819622765-d6bcf132f793?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8cf14450e7ab6e30d85800342f9ed485&auto=format&fit=crop&w=1350&q=80">
    </div>
    <div id="div3" class="pictu" style="display:none;">
     you have press button 3 = this is the display n°3
      <img src="https://images.unsplash.com/photo-1526470608268-f674ce90ebd4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6294955020af986540d05f5d4d8391a3&auto=format&fit=crop&w=1267&q=80">
    </div>
    <div id="div4" class="pictu" style="display:none;">
     you have press button 4 = this is the display n°4
     <img src="https://images.unsplash.com/photo-1527073534339-8f9cd06f5493?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=27e50fadccbc8a11946a91463b682000&auto=format&fit=crop&w=1350&q=80">
    </div>
  </body>
</html>
jordane45
Messages postés
25817
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juin 2019
1666 -
PS: pense à mettre le sujet en RESOLU ( via l'icone de roue crantée à droite du titre de ta question)
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
haha effectivement ça change pas mal une fois codé correctement .
je teste ca sous peu avant de passer en résolu.

merci de ton aide Jordane.
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
tout fonctionne plutôt bien, seul un petit soucis persiste.
lors du chargement de la page (au debut), seul la div défaut (ddiv) doit être affiché et pas encore les autres.

malheureusement avec ton script, toutes les div sont afficher jusqu’à ce qu'un bouton soit pressé .
tu aurais une solution contre ca ? je cherche de mon coté .

merci de ton aide
jordane45
Messages postés
25817
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
24 juin 2019
1666 -
Sachant que ( à moins que tu n'aies changé le code entre temps...) tu as mis tes différentes DIV en display none..
<div id="div1" class="pictu" style="display:none;"

Normalement... elles ne devraient pas apparaitre....


Mais au pire.... il Suffit d'éxécuter le script une première fois au chargement de la page...
function HideAllByClassName(clName){
  var elm = document.getElementsByClassName(clName);
  for (var i = 0; i < elm.length; i ++) {
    elm[i].style.display = 'none';
  }
}

function ShowHideDiv(idDiv){
  HideAllByClassName('pictu');
  var elm = document.getElementById(idDiv);
  elm.style.display = "";
}

//affichage de la première div par défaut lorsque la page a fini de se charger
window.onload = function (){
	   ShowHideDiv('ddiv');
}



astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
my bad ...

je pensé que ta fonction HideAllByClassName me dispensé des
style="display:none;


effectivement quand il sont de retour tout fonctionne impeccablement bien .
sujet résolut .

merci de ton aide Jordane !
Commenter la réponse de astrocurieux