Affichage des catégories grâce à un jeu d'onglets [MAJ : 01/07/15]

Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5

Contenu 2
Contenu 3
Contenu 5

boite 1
boite 2
boite 3
boite 4
boite 5

boite 1
boite 3
boite 4

Spoiler:

Spoiler:

Spoiler:

Code:

/**
 * Fonction qui se déclenche lorsque tous les éléments de la page ont étés créés
 * Comme nous allons effectuer des actions sur les onglets, nous voulons être sûr qu'ils existent
 * Sinon ça ne servirait à rien
 */
$('document').ready(function()
{

/**
 * Condition qui dit que le code est effectué seulement quand
 * Il y a plus que une catégorie.
 */
  if($('.categorievo').size() > 1)
    {

 /**
 * Pour ne pas afficher les onglets dans les sous catégories
 * Et pour ne pas gêner les utilisateurs qui n'activent pas Javascript,
 * Les onglets sont invisibles par défaut.
 * On commence donc par les rendre visibles.
 */
 $('#conteneur_ongletsvo').css( 'display' , 'block' );
 
 /**
 * On indique que l'on change de catégorie lorsque l'on clique sur un onglet
 * Si vous souhaitez changer de catégorie lors du survol (ce que je déconseille)
 * Il vous suffit de remplacer "click" par "hover"
 */
 $('#conteneur_ongletsvo .ongletvo').click(function()
 {

 /**
  * Fonction à exécuter lors du click, ici il s'agit de changer de catégorie.
  * On passe en argument l'index de l'onglet.
  * L'index est le numéro de l'onglet en commençant par 0
  * Pour l'onglet 1, il s'agit du première onglet, l'index vaut 0
  * Pour l'onglet 2, il s'agit du seconde onglet, l'index vaut 1
  * ...
  * Pour l'onglet 5, il s'agit du cinquième onglet, l'index vaut 4
  */
 change_categorie( $('.ongletvo', '#conteneur_ongletsvo').index( this ) )
 });
 
 /**
 * On choisit quelle catégorie afficher en premier.
 * Par défaut, il s'agit de la première (index 0).
 * Si vous souhaitez en afficher une autre, il vous suffit de remplacer le 0
 * par l'index de la catégorie désirée.
 * Si vous voulez toutes les afficher, supprimez cette ligne.
 */
 $('.ongletvo:eq(0)').click();
 }
 });

/**
 * Fonction qui se déclenche à chaque fois que l'on souhaite changer de catégorie
 */
function change_categorie( index )
{

 /**
 * On vérifie que la catégorie demandée existe
 */
 if( $('.categorievo:eq(' + index + ')').size() != 0 )
 {

 /**
 * On masque toutes les catégories
 */
 $('.categorievo').css( 'display' , 'none' );
 
 /**
 * On affiche avec un petit effet la catégorie demandée
 */
 $('.categorievo:eq(' + index + ')').fadeIn( 500 );
 
 /**
 * On enlève la classe "actif" de l'ancien onglet actif
 */
 $('.ongletvo.actif').removeClass('actif');
 
 /**
 * On ajoute la classe "actif" à l'onglet de la catégorie affichée
 */
 $('.ongletvo:eq('+ index +')').addClass('actif');
 }

 /**
 * Si la catégorie n'existe pas, on affiche un message
 */
 else alert('Vous ne pouvez pas accéder à cette catégorie');
}