jQuery tabs: Create HTML tabs using jQuery UI

jquery-uiHTML Tabs have became one of the most used UI components in web design. Tabs are generally used to break content into multiple sections that can be swapped to save space. Different implementation of HTML Tabs are available and jQuery UI is one of the simplest one. For adding jQuery tabs in your HTML page, first you have to make sure that you included the theme css file properly in html. If themes css is not set properly, jQuery tabs will not be rendered properly. Next, include the jQuery javascript in your HTML page. And create your HTML file which contains the tab code. Create your tabs by adding following unordered list in the DIV.
<ul> <li><a href="#firstTab">First</a></li> <li><a href="#secondTab">Second</a></li> <li><a href="#thirdTab">Third</a></li> <li><a href="#forthTab">Forth</a></li> </ul>
Code language: HTML, XML (xml)
In the above code, we created tabs labels. Note href=”#id”, this points to the id of DIV which contains the tab content.
<div id="firstTab">first content</div> <div id="secondTab">second content</div> <div id="thirdTab">Third content</div> <div id="forthTab">Forth content</div>
Code language: HTML, XML (xml)
Next, we need to initialize the tabs. For that add following code at the end of HTML file.
$(document).ready(function() { $("#tabs").tabs(); });
Code language: JavaScript (javascript)
Note that our tabs are encapsulated in a DIV tag with id tabs.

Tab Events in jQuery

A series of events fire when interacting with a tabs interface: * tabsselect, tabsload, tabsshow (in that order) * tabsadd, tabsremove * tabsenable, tabsdisable
$('#tabs').bind('tabsselect', function(event, ui) { // Objects available in the function context: alert(ui.tab); // anchor element of the selected (clicked) tab alert(ui.panel); // element, that contains the selected/clicked tab contents alert(ui.index); // zero-based index of the selected (clicked) tab });
Code language: JavaScript (javascript)
Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).

Lazy loading tab using AJAX

Tabs supports loading tab content via Ajax in an unobtrusive manner. The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing resources (from where the content gets loaded) and no additional containers at all (unobtrusive!). The containers’ markup is going to be created on the fly:
<div id="example"> <ul> <li><a href="sample_1.html"><span>Content 1</span></a></li> <li><a href="sample_2.html"><span>Content 2</span></a></li> <li><a href="sample_3.html"><span>Content 3</span></a></li> </ul> </div>
Code language: HTML, XML (xml)
Lot of other features are available for creating/manipulating html tabs in jQuery. Refer http://docs.jquery.com/UI/Tabs for more details.
Get our Articles via Email. Enter your email address.

You may also like...

18 Comments

  1. thanks.
    i used tabs in this page.http://www.ezzal.com/
    working well.

  2. rizwan says:

    hi ,
    i want to use jqueryui tabs , but i want to load content by clicking on tabs with out using ajax , just like normal page load data , actually i want to build a search page where diferent tabs will work , as well as i want to maintain the state of content search (search criteria)

    thanks

  3. gravitar says:

    Great info!

    May I also suggest Likno Web Tabs Builder. It’s a cool tool for creating html tab controls for your web pages. It’s very easy to use.

    http://www.likno.com/jquery-tabs/index.php

  4. Tks a lot. I have a problem using AJAX JQuery tabs the charset are bad where I can change it please ?

  5. danish says:

    The tabs control don’t work for me. The fields are shown as simple hyper links not as tabs.

    This is what I am using at my html side:

    $(document).ready(function() {
    $(‘#dantabs’).tabs();
    });

    Home
    About
    Contact

    This is Home
    This is B
    This is C

    • meower68 says:

      Make sure the stylesheets and images are in place. Remember, most JQuery stuff just adds CSS classes to stuff and depends on CSS to properly style the elements to get the desired appearance.

      I had the same problem you’re describing. FireBug showed me that it was trying to load a bunch of stylesheets and images which I hadn’t put in place. Once I fixed that, everything displayed properly.

      • iti says:

        WoW
        Thank you for the help, initialy In was also getting tabs as an hyperlink, but after placing the css properly and jquery source in the page, things work fine now.

      • Nkunzis says:

        Hi
        I have the same problem of tabs transformed into hyperlinks.
        Can you please explain me what do u mean by placing stylesheet, i have it in my head as:

        thanks

  6. Kevin Warwick says:

    thanks.
    i used tabs in this page: http://www.frivonlinegames.com/
    working well.

  7. wow says:

    thanks.
    i used tabs in this page: http://www.worldonwater.com
    working well.

  8. badari says:

    thanks its really helpful

  9. Sakina says:

    Nice work.
    But I want the links on the left side and content on the right side.

  10. prashant says:

    tnx i loved it

  11. Sravani says:

    I have 2 tabs and in second tab i have 3 tabs again..when i navigate to first tab and to second rab..3 tabs in 2nd tab are not displaying properly..they are displayed like links

  12. college says:

    Is there any code sample to add the tabs dynamically?

  13. Works fine! Thanks

    My website: http://vuhoanglam.com

  14. anu says:

    <a href="#"> this is working</a> 


    click abow link to check

    <script>
      $(function() {
      $( "#tabs" ).tabs();
       $("#tabs-2").click(function()
       {
          // DO YOUR REFRESH WORK HERE
       });
     });
    </script>
    


    Thank you :) :(

  15. Ramesh says:

    thnaks for this

Leave a Reply

Your email address will not be published. Required fields are marked *