Changer le contenu d'une page sans la réactualiser entièrement

Bonjour ! J'ai longuement parcouru les sujets à se propos, mais je n'ai rien trouvé de très précis.
Je suis novice en intégration, et j'ai aucune expérience avec ajax, jquery, ou javascript.

Voici ma question comment faire pour changer le contenu d'une page sans la réactualiser entièrement ?
J'm'explique : j'ai un menu latéral ainsi qu'une zone de texte qui est sensée changer de contenu en fonction de l'onglet cliqué dans le menu latéral.

code de mon menu :

<div class="menu_gauche">
   <div class="rectangle"><a href="#">Animal</a></div>
   <div class="rectangle"><a href="#">Forme</a></div>
   <div class="rectangle"><a href="#">Couleur</a></div>
   <div class="rectangle"><a href="#">Livre</a></div>
   <div class="rectangle"><a href="#">Magazine</a></div>
   <div class="rectangle"><a href="#">Site web</a></div>
   <div class="rectangle"><a href="#">Personnage fictif</a></div>
   <div class="rectangle"><a href="#">Personnage connu</a></div>
   <div class="rectangle"><a href="#">Musique</a></div>
   <div class="rectangle"><a href="#">Sport</a></div>
   <div class="rectangle"><a href="#">Lieu</a></div>
</div> <!--fin div menu_gauche-->]

code de ma zone de texte :

<div class="supporttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, soluta, perferendis sed sint nobis assumenda facilis quia nisi illo officia! Nostrum, tempore, quidem, asperiores quam repellendus natus doloremque ullam officia inventore deserunt nam provident quod iusto aliquam esse maxime similique magni amet praesentium laborum minima officiis nesciunt eligendi dolores rem?</div>
  </div>]

Suite à mes recherches j'ai compris que j'allais avoir recours à l'ajax, jquery ou javascripts, mais n'ayant jamais manipulé ce langage, je n'arrive à rien mettre en place malgré les petits tutos que j'ai consulté sur internet comme celui ci : http://gaming-at-work.com/WordPress3/rafraichir-le-contenu-dune-page-sans-la-recharger-avec-ajax-et-jquery/#.U06Lsah_ssF
Modifié par Fuse-Agency (16 Apr 2014 - 15:59)

Bonjour,

Le texte n'est stocké nulle part? Il est juste dans le code? Si oui, inutile d'utiliser AJAX.
Tu as juste à faire une petite fonction JS qui te permettra d'affiche le texte souhaité. Voici un exemple :

<div class="menu_gauche">
   <div class="rectangle"><a href="#" onclick="affiche('premier texte');" >Animal</a></div>
   <div class="rectangle"><a href="#" onclick="affiche('deuxieme texte');">Forme</a></div>
</div>

<div id="supporttext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, soluta, perferendis sed sint nobis assumenda facilis quia nisi illo officia! Nostrum, tempore, quidem, asperiores quam repellendus natus doloremque ullam officia inventore deserunt nam provident quod iusto aliquam esse maxime similique magni amet praesentium laborum minima officiis nesciunt eligendi dolores rem?</div>

Et côté du code JS c'est quelque chose de simple :

var $texte1 = "Voici le premier texte";
var $texte2 = "Le deuxième texte!!"

function affiche(texte){
	document.getElementById('supporttext').innerHTML = texte;
}

J'ai fait ça vite fait, ça peut certainement être amélioré.
As-tu compris le principe?

Tu peux voir ce que ça donne ici : http://codepen.io/anon/pen/oHdgc/

Cordialement,
Modifié par nef1912 (18 Apr 2014 - 15:21)