enavu webdevmania tutsvalley psdestination
visit the enavu network
9 Comments Article Title Overlay Article Title

Make a custom tab interface with JQuery

Demo Source
First of all i would like to appologise i needed 4 days to write a new tutorial, that’s because i am working hard on developing a website from scratch to replace the wordpress.
Ok let’s start.
HTML
<!– start the tabs wrapper (not necessery, but good to have) –>
<div id=”tabs_wrapper”>
<!– the tab [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Demo Source

First of all i would like to appologise i needed 4 days to write a new tutorial, that’s because i am working hard on developing a website from scratch to replace the wordpress.
Ok let’s start.

HTML

<!-- start the tabs wrapper (not necessery, but good to have) -->
<div id="tabs_wrapper">
    <!--  the tab links  -->
    <a class="tab_link tab_link_selected" title="#popular" href="popular.html">Popular</a>
    <a class="tab_link" title="#recent" href="recent.html">Recent</a>
    <a class="tab_link" title="#new" href="new.html">New</a>
    <!--  end tab links  -->

    <!--  clear it  -->

    <!-- start tab text containers  -->
<div id="popular" class="tab_text active_tab">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="recent" class="tab_text">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div id="new" class="tab_text">
        That's it. Quite easy isn't it.</div>
<!--  end tab text containers  --></div>
<!-- end the tabs wrapper -->

1

Now, let’s style this. It’s really simple.

CSS

    .tab_link {
    float:left; /* important */
    /* just styling */
    border:1px solid black;
    background: #135484;
    padding:5px;
    margin-right:10px ;
    color:white;
    text-decoration:none;
    font-variant:small-caps;
    }
    .tab_link_selected{ background-color: #65899E; } /* just a different tab link bg color when it's selected */
    .tab_text {
    display: none; /* hide the text containers */
    /* just styling */
    border:1px solid black;
    padding:5px;
    color:black;
    }
    .clear {clear: both;}  /* when we use css float property, we need to clear after the last floated item */

2

Now when it’s all ready we can deal with JQuery.

JQuery

        $(document).ready(function(){
         /*Since all the tabs are hidden with css we are displaying the tab with class .active_tab using fadeIn()
         function. If you just want it to show with no effect, just put show() instead of fadeIn() */
        $('.active_tab').fadeIn();

        //when a tab link is clicked...
        $('.tab_link').live('click', function(event){

            /*...prevent the default behaviour...*/
            event.preventDefault();

            /* ...remove the tab_link_selected class from current active link... */
            $('.tab_link_selected').removeClass('tab_link_selected');

            /* ...and add it to the new active link */
            $(this).addClass('tab_link_selected');

            /*...get the title attribute (which corensponds to the id of the needed text container),
            but you can use any attribute you want*/
            var container_id = $(this).attr('title');

            //...animate the current active_tab by changing it's height and opacity ...'
            $('.active_tab').animate({

                height : 'toggle' , opacity : 'toggle'

            //...and when that animation ends...
            },function(){

                //...remove the active_tab class from the current active tab...
                $(this).removeClass('active_tab');

                //...and add that class to the tab that corensponds the clicked link...
                $(container_id).addClass('active_tab');

                //...and animate the new active_tab by using toggle on height and opacity again...
                $('.active_tab').animate({

                    height : 'toggle' , opacity : 'toggle'

                });
            });

        });
    });

Final words

That’s it, now you can make your own tab interface with ease.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Related posts:

  1. Making a nice jQuery content scroller with ease.
  2. Web Application Interface Design Guide
  3. Making a Cool Spotlight Effect with jQuery
  4. Equal Column Height with jQuery
  5. Making a jQuery pagination system

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • hi,
    thanks for this tut. I would like to translate this into Polish and publish it on my blog.

    Thanks a lot.

  • Sure, just put a link to this page as source :)

  • How can we stop the animations to queue ? If ( for example your demo ) i click on multiple tabs … the animations will get out of sync.

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting