jQuery Simple Tab Switcher

This is a simple implementation of a tab switcher using jQuery

jQuery Readings

• addClass()
• removeClass()
• hide()
• show()
• attr()
• click()

Header Script

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <style type="text/css">

        #tabswitch{font-family:Arial;font-size:12px;}

        #tabswitch ul{list-style:none;margin:0;padding:0;clear:both;height:27px;}

        #tabswitch ul li{float:left;margin:0;padding:5px;width:100px;border:solid 1px #EFEFEF;border-bottom:solid 1px #ffffff;cursor:pointer;}

        #tabswitch ul li.active{background-color:#EFEFEF;border-bottom:solid 1px #EFEFEF}

        #tabswitch ul li:hover{font-weight:bold;}

        #tabswitch .tab-container{width:400px;border:solid 1px #EFEFEF;padding:10px;background-color:#EFEFEF;display:none;}

    </style>

Body Script

    <div id="tabswitch">

        <ul>

            <li class="tab1">Tab 1</li>

            <li class="tab2">Tab 2</li>

            <li class="tab3">Tab 3</li>

        </ul>

        <div class="tab-container tab1">

            <p>Vestibulum in mi lorem. Ut at erat sagittis mi rutrum gravida. Donec et nisi ac est viverra feugiat. Nulla sodales scelerisque fringilla. Suspendisse potenti. Proin lorem turpis, dapibus eu malesuada a, vestibulum laoreet ante. Proin ut nibh eros. In auctor, erat porttitor faucibus feugiat, nibh magna malesuada nibh, eget blandit erat dolor sit amet nisi. Mauris quis nibh mi. Etiam eget felis quis lorem varius convallis. Integer sodales lectus eu diam pulvinar molestie. Proin eros risus, laoreet vitae volutpat in, pharetra non velit. Curabitur ut nisi ante. Duis commodo tortor ut tortor porttitor ac faucibus nisl adipiscing. Integer non arcu sapien. Integer eget est odio. Morbi quis malesuada erat. Cras commodo venenatis dolor nec feugiat. Nam id tincidunt augue. Nam eleifend scelerisque bibendum. </p>

        </div>

        <div class="tab-container tab2">

            <img src="http://image.shutterstock.com/display_pic_with_logo/51495/51495,1232158237,2/stock-photo-cute-chocolate-lab-puppy-23407567.jpg" alt="" />

        </div>

        <div class="tab-container tab3">

            <iframe src ="http://google.com" width="100%" height="300">

                <p>Your browser does not support iframes.</p>

            </iframe>

        </div>

    </div>

How Does the Body Script Works?

Line 1: Used div#tabswitch to wrap our tabs and tab-container
Line 2-6: Using <li>, we created our tabs with unique class assigned to each one (“tab1“, “tab2“, “tab3“). Using jQuery we would be able to identify which <li> was clicked and which tab-container would be shown.
Line 7, 10, 13: We wrapped the contents of our tabs using <div> and assigned them classes that correspond to their tabs. So:

• <li class=”tab1″> is to <div class=”tab1″>
• <li class=”tab2″> is to <div class=”tab2″>
• <li class=”tab3″> is to <div class=”tab3″>

Also, added the general class “tab-container” to each data container so that we could call all of them at once. I placed different content to each data container to showcase which contents can be placed in each container.

• tab1 = plain text
• tab2 = image
• tab3 = iframe

jQuery Script

    <script type="text/javascript">

        jQuery(document).ready(function() {

            jQuery("#tabswitch ul li:first").addClass("active");

            jQuery("#tabswitch div.tab-container:first").show();

            jQuery("#tabswitch ul li").click(function(){

                jQuery("#tabswitch div.tab-container").hide();

                jQuery("#tabswitch ul li").removeClass("active");
                var tab_class = jQuery(this).attr("class");
                jQuery("#tabswitch div." + tab_class).show();

                jQuery("#tabswitch ul li." + tab_class).addClass("active");

            })

        });

    </script>

How Does Our jQuery Script Works?

Line 3: Add “active” class to our first tab
Line 4: Show our first tab-container which corresponds to our first tab
Line 6: Let us add the click event handler to our <li> element using jQuery .click()
Line 7: Hide all tab-container
Line 8: Remove the “active” class from all of our <li> element
Line 9: Using the jQuery .attr() function, let us get the class of the <li> that was clicked
Line 12: Show the tab-container that has the same class with the tab that was clicked
LIne 13: Add the “active” class to the <li> that was clicke

Demo

See it in action

• Tab 1
• Tab 2
• Tab 3

Vestibulum in mi lorem. Ut at erat sagittis mi rutrum gravida. Donec et nisi ac est viverra feugiat. Nulla sodales scelerisque fringilla. Suspendisse potenti. Proin lorem turpis, dapibus eu malesuada a, vestibulum laoreet ante. Proin ut nibh eros. In auctor, erat porttitor faucibus feugiat, nibh magna malesuada nibh, eget blandit erat dolor sit amet nisi. Mauris quis nibh mi. Etiam eget felis quis lorem varius convallis. Integer sodales lectus eu diam pulvinar molestie. Proin eros risus, laoreet vitae volutpat in, pharetra non velit. Curabitur ut nisi ante. Duis commodo tortor ut tortor porttitor ac faucibus nisl adipiscing. Integer non arcu sapien. Integer eget est odio. Morbi quis malesuada erat. Cras commodo venenatis dolor nec feugiat. Nam id tincidunt augue. Nam eleifend scelerisque bibendum.

Download

Download the file Tab Switcher by CodingCereal

HTH

Thanks for reading!

Be Sociable, Share!

•