jquery tabs

30.05.2011
tab

The task is to make tabs in jquery.

 <script type="text/javascript">
$(function() {
    $("div.tabcontent ul.tabNavigation li:last").css("border-right", "0").css("width", "87px");
    var tabContainers = $('div.tabcontent div.tabs-cont div'); // Replace all divs in .tabs-cont with a variable.
    tabContainers.hide().filter(':first').show(); // On load, hide these divs except for the first one.
    
    $('div.tabcontent ul.tabNavigation a').click(function () { // Action happens when the link is clicked.
        tabContainers.hide(); // Hide all divs.
        tabContainers.filter(this.hash).fadeIn("slow"); // Smoothly develop the block with the id specified in the href of the link.
        $('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Remove the selected class from all links.
        $(this).addClass('selected'); // Add the selected class to the clicked link.
        return false;
    }).filter(':first').click(); // On load, automatically assign the selected class to the first link.
});

Operation algorithm: Sections (li) in the ".tabNavigation" block are assigned a class when clicked, which will change the background color. The content of ".tabs-cont" will smoothly change its transparency from hide to 1.0. jquery is in the code and is not intrusive javascript code.

Last in our blog

Internet Marketing
04.11.2019