Verwendung von CSS und jQuery zum Ein- und Ausblenden von Tab-Inhalten
Demo: Klicken Sie auf die Registerkarte
Wenn ich meinefoodshaker.com entwickle. Ich muss eine Navigation mit mehreren Registerkarten erstellen, um den Inhalt der Registerkarten ein- und auszublenden. Um ein leichtgewichtiges Multitab zu entwickeln, habe ich mich für jQuery und CSS entschieden, um es zu vereinfachen.
1. Erläuterung
Nachfolgend finden Sie ein Beispiel für die Navigation:
Es muss angegeben werden, welche Navigation angezeigt wird. Daher verwende ich den aktiven CSS-Klassennamen, um sie darzustellen. Mit „nav nav-tabs“ wird das Erscheinungsbild der Navigation festgelegt. Jeder Navigationslink<a> hat das Ziel des jQuery-Selektors für Registerkarteninhalte.
E.g. href="#tab1", der Wert des href-Attributs wird verwendet, um ein jQuery-Objekt zu erstellen und den Inhalt anzuzeigen.
Nachfolgend finden Sie ein Beispiel für den Inhalt von Registerkarten:
Der CSS-Klassenname "hide" wird verwendet, um die Anzeige als "none" zu formatieren. Dabei gilt Folgendes:
.tab-content.hide{
display: none;
}
Der CSS-Klassenname "Aktiv" wird verwendet, um die anzuzeigende Anzeige zu gestalten. Dabei gilt Folgendes:
.tab-content.active{
display: block;
}
Um das Klick-Ereignis der Navigation zu vereinfachen, benötigen wir ein Klick-Ereignis wie im Folgenden:
$('.nav-tabs > li > a').click(function(event){
//...... logic to hide and show tab content
}
Zuerst müssen wir die angezeigte Navigation finden und den Inhalt der Registerkarte anzeigen. Somit:
//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');
Dann finden wir die aktivierte Navigation und ändern sie in nicht aktiv:
//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');
Außerdem müssen wir die angeklickte Navigation ändern, um aktiv zu sein:
//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');
Inhalt der Zielregisterkarte anzeigen:
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
2. Vollständiges Beispiel
Vervollständigen Sie den HTML-Quellcode, um mithilfe von CSS und jQuery Tab-Inhalte ein- und auszublenden.
How to use CSS and jQuery to hide and show tab content
Content in tab 1
Quellcode herunterladen
Laden Sie es herunter -How-to-use-CSS-and-jQuery-to-hide-and-show-tab-content.zip (1 KB)