Navigation sans changer page

Bonjour à tous,
je crée un site et je souhaiterais créer des boutons de navigation. Jusque là pas de problème.
En fait je voudrais que lorsqu'on clique sur le bouton le lien ne soit pas .com/page2
mais que cela reste sur la même page .com/#page2
Donc que cliquer sur un bouton modifie le contenu d'une div en dessous

J'espère m'être fait comprendre ...

Merci !

Regarde plus bas dans la liste j'ai initié un sujet là dessus, ça te donneras déjà quelques billes.

Sinon quand tu modifie ton contenu tu passe avec PHP ou masque/affiche des divs ?

bonjour,

Si c'est pour ne pas afficher les script appeler : regarde du côté des "URL Rewriting"

Si c'est pour changer de contenu sans changer de page tu as plusieurs solutions possible en javascript :

- afficher / cacher des bloc
menu

<ul>
   <li id="menu_1">menu1</li>
   <li id="menu_2">menu2</li>
</ul>

blocs

<div class='page' id="page1"></div>
<div class='page' id="page2"></div>

js / jquery

$('.page').hide();
$('#page1').show();

$('li').click(function(){
   id = $(this).attr('id').split('_')[1];
   $('.page').hide();
   $('#page'+id).show();
});

Tu pourras même ajouter des effets de transition.

- appel contenu : en ajax tu va chercher le contenu et tu l'inseres dans une balise qui contiendra l'intégralité de ta page

$('#content').html(data);

mini-truc a écrit :
Si c'est pour ne pas afficher les script appeler : regarde du côté des "URL Rewriting"

Tu pourrais m'en dire plus sur "afficher les script appeler" ?

Et bien tu peux créer des scripts qui contiendrai uniquement le contenu des page que tu souhaites afficher ; par exemple
en PHP j'ai une page qui regrouper tous mes pages et qui selon l'action passé en post afficher le contenu choisi

if(isset($_POST['action']) && !empty($_POST['action'])){
   $action = $_POST['action'];
   $action();
}else{
   page1();
}

function page1(){
  echo '<h1>Accueil</h1>';
}

function page2(){
  echo '<h1>Page2</h1>';
}

en jquery j'appelle les pages souhaitées

$.ajax({
   type: "POST",
   url: "pages.php",
   data: { action : 'page2'},
   success: function(data) {
      $('#contenu').html(data);
   }
});

Plus qu'a placer ce bout de code dans un évenement clic et de remplacer page2 par le valeur cliquée

Pour moi cette méthode est plus "propre"
Modifié par mini-truc (22 Aug 2013 - 16:19)

Voila tout fonctionne merci beaucoup !
Modifié par quinto (22 Aug 2013 - 17:42)

Ok mini-truc, merci pour les détails.

Une derniere question, pendant le chargement de la page, les div qui sont censées etre cachée s'affiche en dessous de la premiere div et ensuiute une fois la page chargée elle se remette normalement.
N'y a t-il pas un moyen que lors du chargement les div qui sont censées etre cachée soient cachées ?

Quinto, je te conseille FORTEMENT de lire mon post à ce sujet, d'un point de vue accessibilité il faut tout afficher et masqué le contenu non désiré, pas l'inverse.