Faire une page avec plusieurs vues dynamiques sans Javascript

Il existe de plus en plus de petits sites avec une page unique disposant de plusieurs vues avec la possibilité de naviguer entre elles à l'aide de liens mais sans pour autant recharger la page. Le changement des vues est dynamique et on a souvent tendance à directement associer dynamisme avec l'utilisation de javascript.

Sachez que mettre en place ce système ne requiert pas forcement l'utilisation de javascript.

Voilà un code simple permettant de gérer l'affichage plusieurs vues directement depuis le CSS en utilisant les "target" :

Partie CSS :

#page > *{
	display:none;
}
#page > *:target{
	display:block;
}
#page > *:last-child{
	display:block;
}
#page > *:target ~ * {
    display: none;
}

Partie HTML :

<nav>
	<a href="#page1">Go 1</a>
	<a href="#page2">Go 2</a>
</nav>

<section id="page">
	<div id="page1">Page 1</div>
	<div id="page2">Page 2</div>
</section>

Chacune des vues sont contenues dans un div ayant l'ID que vous souhaitez (ici #page1, #page2 ...). Cet ID doit être le même que celui utilisé pour le target des liens de navigation.

La partie CSS se charge dans un premier temps de cacher toutes les vues de la page ("#page > *" : Tous les élements contenus dans la section #page). Ensuite, l'élément ciblé par l'URL (s'il existe) est affiché ("#page > *:target"). La suite du CSS permet d'afficher une page par défaut si aucune vue n'est sélectionnée.

Dans la configuration actuelle, la vue qui sera affichée par défaut sera la dernière ("#page > *:last-child"). Ici ce sera donc la #page2.

Voir une démo du code

Source et plus d'infos