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>

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>

Next, we need to initialize the tabs. For that add following code at the end of HTML file.

$(document).ready(function() {
	$("#tabs").tabs();
});

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

});

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>

Lot of other features are available for creating/manipulating html tabs in jQuery. Refer http://docs.jquery.com/UI/Tabs for more details.



17 Comments

  • Venkadesan Tharshan 7 July, 2009, 6:58

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

  • rizwan 3 November, 2009, 23:56

    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

  • gravitar 7 July, 2010, 14:22

    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

  • Patrice Rolland 13 January, 2011, 20:45

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

  • danish 11 April, 2011, 0:15

    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 22 December, 2011, 3:27

      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 21 September, 2012, 14:43

        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 13 July, 2013, 1:02

        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

  • Kevin Warwick 16 May, 2011, 14:38

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

  • wow 27 October, 2011, 20:32

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

  • badari 18 December, 2011, 2:57

    thanks its really helpful

  • Sakina 7 February, 2012, 14:10

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

  • prashant 31 March, 2012, 20:48

    tnx i loved it

  • Sravani 21 June, 2012, 18:00

    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

  • college 22 September, 2012, 11:14

    Is there any code sample to add the tabs dynamically?

  • Vũ Hoàng Lâm 26 October, 2012, 19:10

    Works fine! Thanks

    My website: http://vuhoanglam.com

  • anu 29 June, 2014, 21:53
     <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 :) :(

Leave a Reply

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

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *