Maxy.fr

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

Categories : CSS, HTML

By Guillaume - 08/18/2016 at 01:12 am

Shar this article :

Similar articles

Easily add a dual-slider to your HTML forms

When designing HTML forms, you may quickly find yourself limited by the basic form elements provided. For example, if you use sliders with the <input type="range"> element, they only allow the use of a single slider per element. However, there may be times when you need a field with two...