TOC

Comment utiliser CSS et jQuery pour masquer et afficher le contenu des onglets

Comment utiliser CSS et jQuery pour masquer et afficher le contenu des onglets

Démo: essayez de cliquer sur l'onglet

Lorsque je développe mesfoodshaker.com. Il est nécessaire pour moi de créer une navigation multi-onglets pour masquer et afficher le contenu des onglets. Afin de développer un multitab léger, j'ai décidé d'utiliser jQuery et CSS pour le faciliter.

1. Explication

Voici un exemple de navigation:

Il est nécessaire d'indiquer quelle navigation est affichée, donc j'utilise le nom de classe CSS «actif» pour le représenter. «Nav nav-tabs» est utilisé pour styliser l'apparence de la navigation. Chaque lien de navigation<a> a pour cible le sélecteur jQuery de contenu d'onglet.

E.g. href="#tab1", la valeur de l'attribut href sera utilisée pour créer l'objet jQuery et afficher le contenu.

Voici un exemple de contenu d'onglet: 


    

        Content in tab 1
    





    

        Content in tab 2
    





    

        Content in tab 3

Le nom de classe CSS ‘hide’ est utilisé pour définir l’affichage sur aucun, où: 

.tab-content.hide{
    display: none;
}

Le nom de classe CSS «actif» est utilisé pour styliser l'affichage à afficher, où: 

.tab-content.active{
    display: block;
}

Pour faciliter l'événement de navigation par clic, nous avons besoin d'un événement «clic» comme ci-dessous: 

$('.nav-tabs > li > a').click(function(event){
   //...... logic to hide and show tab content
}

Tout d'abord, nous devons trouver la navigation affichée et afficher le contenu des onglets. Donc: 

//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');

Ensuite, nous trouvons la navigation activée et l'avons changée en non active: 

//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');

De plus, nous devons changer la navigation cliquée pour être actif: 

//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');

Afficher le contenu de l'onglet cible: 

var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');

2. Exemple complet

Code source HTML complet pour utiliser CSS et jQuery pour masquer et afficher le contenu des onglets. 


  
    How to use CSS and jQuery to hide and show tab content

    
    
        
    
    
        
        

            

                Content in tab 1
            

        

        

            

                Content in tab 2
            

        

        

            

                Content in tab 3

Télécharger le code source

Téléchargez-le -How-to-use-CSS-and-jQuery-to-hide-and-show-tab-content.zip (1 Ko)

Related