TOC

Как использовать CSS и jQuery для скрытия и отображения содержимого вкладки

Как использовать CSS и jQuery для скрытия и отображения содержимого вкладки

Демо: попробуйте щелкнуть вкладку

Когда я разрабатываю свойfoodshaker.com. Для меня требуется создать навигацию с несколькими вкладками, чтобы скрывать и показывать содержимое вкладок. Чтобы разработать облегченный мультитаб, я решил использовать jQuery и CSS для его облегчения.

1. объяснение

Ниже приведен пример навигации:

Требуется указать, какая навигация отображается, поэтому я использую «активное» имя класса CSS для его представления. «Nav nav-tabs» используется для определения стиля навигации. Каждая ссылка навигации<a> имеет цель - селектор jQuery содержимого вкладки.

E.g. href="#tab1", значение атрибута href будет использоваться для создания объекта jQuery и отображения содержимого.

Ниже приведен пример содержимого вкладки: 


    

        Content in tab 1
    





    

        Content in tab 2
    





    

        Content in tab 3

CSS-имя класса «скрыть» используется, чтобы стиль отображения не был, где: 

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

CSS-имя класса «active» используется для стилизации отображаемого отображения, где: 

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

Чтобы облегчить навигацию по клику, нам нужно событие клика, как показано ниже: 

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

Для начала нам нужно найти показанную навигацию и отображение содержимого вкладки. Таким образом: 

//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');

Затем мы находим активированную навигацию и меняем ее на не активную: 

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

Кроме того, нам нужно изменить активированную навигацию: 

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

Показать содержимое целевой вкладки: 

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

2. Полный пример

Полный исходный код HTML для использования CSS и jQuery для скрытия и отображения содержимого вкладки. 


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

    
    
        
    
    
        
        

            

                Content in tab 1
            

        

        

            

                Content in tab 2
            

        

        

            

                Content in tab 3

Скачать исходный код

Скачать -How-to-use-CSS-and-jQuery-to-hide-and-show-tab-content.zip (1 КБ)

Related