Sujet Précédent Sujet Suivant

Boutons pour modifier contenue d'une page

Résolu/Fermé
Utilisateur anonyme - 31 août 2018 à 14:43
 Utilisateur anonyme - 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.

A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
31 août 2018 à 17:05
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>

0
Utilisateur anonyme
31 août 2018 à 18:16
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>
0
Utilisateur anonyme
31 août 2018 à 18:20
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
0
Réponse 2 / 2
Utilisateur anonyme
31 août 2018 à 19:22
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>
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
31 août 2018 à 19:54
Un truc du genre 
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 = "";
}


et coté html 
 <a href="#" onclick="ShowHideDiv('ddiv');">default</a>
 <a href="#" onclick="ShowHideDiv('div1');">default</a>
 <a href="#" onclick="ShowHideDiv('div2');">default</a>
 <a href="#" onclick="ShowHideDiv('div3');">default</a>
 <a href="#" onclick="ShowHideDiv('div4');">default</a>
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
31 août 2018 à 19:55
PS: pense à mettre le sujet en RESOLU ( via l'icone de roue crantée à droite du titre de ta question)
0
Utilisateur anonyme
31 août 2018 à 20:34
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.
0
Utilisateur anonyme
31 août 2018 à 21:39
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
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
31 août 2018 à 21:46
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');
}
0