Chargement…
Créer Des Onglets en CSS et JQuery

Créer Des Onglets en CSS et JQuery



Les onglets sont très utiles en web design et développement de notre site. Ils nous permets d’insérer des liens et des informations dans une seul et même page et d’avoir plus d’espaces pour ajouter plus de données dans notre site web. Dans ce web design tutoriel, on va vous montrez comment créer des onglets en CSS 3 et jQuery. Vous pouvez utiliser le même principe dans vos projets, il faudra juste modifier le CSS par rapport à la structure de votre site web.

Création Des Onglets en CSS et jQuery

Il faut noter qu’il est tout a fait possible de connecter notre code avec une base de donnée et cela on utilisant Ajax et PHP. Dans notre exemple, on va créer des onglets pour un profil d’utilisateur, on a inclue toutes les informations sur la même page, alors on utilise juste un petit code jQuery pour passer d’une Section à l’autre :

Démonstration

Dans la première page de notre profil, on affiche la section biographie par défaut, mais pour les autres sections (Recents, amis et options) on ajoute une class cacher.

Notre CSS et la Structure de la Page

La première chose que nous avons fais est de mettre l’image de profil a droite pour avoir plus d’espace pour le Menu et le contenu des Onglets.
Chaque onglet de profil a un lien Unique. Le menu des onglets est construit autour d’une liste non ordonnée de liens (LI) avec une valeur href qui correspondant à l’ID de la section de contenu. C’est un procédé très simple pour l’obtention de la nouvelle valeur de la section à l’intérieur de notre code JavaScript.

Voila, vous pouvez télécharger le code source de notre exemple :

Télécharger Code Source

Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



Laisser un commentaire