JqueryUI - Tabs

Advertisements

Previous Page
Next Page  

Tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allow us to save space like accordions. For tabs to work properly following set of markups needs to use −

  • Tabs must be in a list either ordered(<ol>) or unordered(<ul>).

  • Each tab title must be within each <li> and wrapped by anchor (<a>) tag with an href attribute.

  • Each tab panel may be any valid element but it must have an id, which corresponds to the hash in the anchor of the associated tab.

jQueryUI provides us tabs () method drastically changes the appearance of HTML elements inside the page. This method traverses (internally in jQuery UI) HTML code and adds new CSS classes to the elements concerned (here, the tabs) to give them the appropriate style.

Syntax

The tabs () method can be used in two forms −

$ (selector, context).tabs (options) Method

The tabs (options) method declares that an HTML element and its content should be managed as tabs. The options parameter is an object that specifies the appearance and behavior of tabs.

Syntax

$(selector, context).tabs (options);

You can provide one or more options at a time using JavaScript object. If there are more than one options to be provided then you will separate them using a comma as follows −

$(selector, context).tabs({option1: value1, option2: value2..... });

The following table lists the different options that can be used with this method −

Sr.No. Option & Description
1 active

This option specifies the current active tab/panel. By default its value is 0.

Option - active

This option specifies the current active tab/panel. By default its value is 0.

This can be of type −

  • Boolean − When set to false, will collapse all the panels. This requires the collapsible option to be true.

  • Integer −

    The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

Syntax

$( ".selector" ).tabs (
   { active: 1 }
);
2 collapsible

This option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.

Option - collapsible

This option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.

Syntax

$( ".selector" ).tabs (
   { collapsible: true }
);
3 disabled

This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). For example, use [0, 1] to disable the first two tabs. By default its value is false.

Option - disabled

This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). For example, use [0, 1] to disable the first two tabs. By default its value is false.

This can be of type −

  • Boolean − Enable or disable all tabs.

  • Array − An array containing the zero-based indexes of the tabs that should be disabled, e.g., [ 0, 2 ] would disable the first and third tab.

Syntax

$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
4 event

This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".

Option - event

This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".

Syntax

$( ".selector" ).tabs (
   { event: "mouseover" }
);
5 heightStyle

This option controls the height of the tabs widget and each panel. By default its value is "content".

Option - heightStyle

This option controls the height of the tabs widget and each panel. By default its value is "content".

Possible values are −

  • auto − All panels will be set to the height of the tallest panel.

  • fill − Expand to the available height based on the tabs' parent height.

  • content − Each panel will be only as tall as its content.

Syntax

$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
6 hide

This option specifies how to animate hiding of panel. By default its value is null.

Option - hide

This option specifies how to animate hiding of panel. By default its value is null.

This can be of type −

  • Boolean − When set to false, no animation will be used and the panel will be hidden immediately.

  • Number − The panel will fade out with the specified duration and the default easing.

  • String − The panel will be hidden using the specified effect. Value can be slideUp or fold

  • Object − For this type, properties effect, delay, duration and easing may be provided.

Syntax

$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
7 show

This option specifies how to animate showing of panel. By default its value is null.

Option - show

This option specifies how to animate showing of panel. By default its value is null.

This can be of type −

  • Boolean − When set to false, no animation will be used and the panel will be shown immediately.

  • Number − The panel will fade out with the specified duration and the default easing.

  • String − The panel will be shown using the specified effect. Value can be slideUp or fold.

  • Object − For this type, properties effect, delay, duration and easing may be provided.

Syntax

$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

The following section will show you a few working examples of tabs functionality.

Default Functionality

The following example demonstrates a simple example of tabs functionality, passing no parameters to the tabs() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −

In the above example, click on tabs to swap between content.

Use of heightStyle, collapsible, and hide

The following example demonstrates the usage of three options (a) heightStyle (b) collapsible, and (c) hide in the tabs function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Click the selected tab to toggle its content closed/open. You can also see the animation effect "slideUp" when the tab is closed.

Use of Event

The following example demonstrates the usage of three options event in the tabs function of JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example toggle the sections open/closed with mouseover the tabs.

$ (selector, context).tabs ("action", params) Method

The tabs ("action", params) method allows an action on the tabs (through a JavaScript program), selecting, disabling, adding, or removing a tab. The action is specified as a string in the first argument (e.g., "add" to add a new tab). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).tabs ("action", params);;

The following table lists the different actions that can be used with this method −

Sr.No. Action & Description
1 destroy

This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Action - destroy

This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

Syntax

$( ".selector" ).tabs("destroy");
2 disable

This action disables all tabs. This method does not accept any arguments.

Action - disable

This action disables all tabs. This method does not accept any arguments.

Syntax

$( ".selector" ).tabs("disable");
3 disable( index )

This action disables the specified tab. Where index is the tab to be disabled.

Action - disable( index )

This action disables the specified tab. Where index is the tab to be disabled. To disable more than one tab at once, set the disabled option: $( "#tabs" ).tabs( "option", "disabled", [ 1, 2, 3 ] ).

Syntax

$( ".selector" ).tabs( "disable", 1 );
4 enable

This action activates all the tabs. This signature does not accept any arguments.

Action - enable

This action activates all the tabs. This signature does not accept any arguments.

Syntax

$( ".selector" ).tabs("enable");
5 enable( index )

This action activates a specified tab. Where index is the tab to be enabled.

Action - enable( index )

This action activates a specified tab. Where index is the tab to be enabled. To enable more than one tab at once reset the disabled property like: $( "#example" ).tabs( "option", "disabled", [] );.

Syntax

$( ".selector" ).tabs( "enable", 1 );
6 load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

Action - load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

Syntax

$( ".selector" ).tabs("load", 1);
7 option( optionName )

This action gets the value currently associated with the specified optionName.

Action - option( optionName )

This action gets the value currently associated with the specified optionName.

Syntax

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8 option

This action gets an object containing key/value pairs representing the current tabs options hash.

Action - option

This action gets an object containing key/value pairs representing the current tabs options hash. This method does not accept any arguments.

Syntax

$( ".selector" ).tabs("option");
9 option( optionName, value )

This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Action - option( optionName, value )

This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

Syntax

$( ".selector" ).tabs( "option", "disabled", true );
10 option( options )

This action sets one or more options to the tabs.

Action - option( options )

This action sets one or more options to the tabs.

Syntax

$( ".selector" ).tabs( "option", { disabled: true } );
11 refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

Action - refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

Syntax

$( ".selector" ).tabs( "refresh" );
12 widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

Action - widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

Syntax

var widget = $( ".selector" ).tabs( "widget" );

Use of Action Disable()

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Here you can see all the tabs are disabled.

Use of Action Disable(index)

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable(index) method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output −

In the above example, you notice that Tab 3 is disabled.

Event Management on tabs elements

In addition to the tabs (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation).

Event - activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation). Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • newTab − The tab that was just activated.

  • oldTab − The tab that was just deactivated.

  • newPanel − The panel that was just activated.

  • oldPanel − The panel that was just deactivated.

Syntax

$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
2 beforeActivate(event, ui)

This event is triggered before a the tab has been activated.

Event - beforeActivate(event, ui)

This event is triggered before a the tab has been activated. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • newTab − The tab that is about to be activated.

  • oldTab − The tab that is about to be deactivated.

  • newPanel − The panel is about to be activated.

  • oldPanel − The panel is about to be deactivated.

Syntax

$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
3 beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made.

Event - beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • tab − The tab that is being loaded.

  • panel − The panel which will be populated by the Ajax response.

  • jqXHR − The jqXHR object that is requesting the content.

  • ajaxSettings − The settings that will be used by jQuery.ajax to request the content.

Syntax

$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
4 create(event, ui)

This event is triggered when tabs are created.

Event - create(event, ui)

This event is triggered when tabs are created. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • tab − The active tab.

  • panel − The active panel.

Syntax

$( ".selector" ).slider({
   create: function( event, ui ) {}
});
5 load(event, ui)

This event is triggered after a remote tab has been loaded.

Event - load(event, ui)

This event is triggered after a remote tab has been loaded. Where event is of type Event, and ui is of type Object. Possible values of ui are −

  • tab − The tab that was just loaded.

  • panel − The panel which was just populated by the Ajax response.

Syntax

$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage in tabs widgets. This example demonstrates the use of events activate and create.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Let us save the above code in an HTML file tabsexample.htm and open it in a standard browser which supports javascript, you should see the following output −

Click on the tabs to see a message getting printed below on specific to events.

Advertisements