Compdigitec Labs

« | Home | »

Creating jQuery UI Tabs

By admin | August 21, 2011

jQuery UI Tabs are an easy way to make tabs in your web applications or web sites easily with less code. Consider the following tab structure:

<div id="tabgroup">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="#tab3">More Tabs</a></li>
	</ul>
	<div id="tab1">Hello</div>
	<div id="tab2">World</div>
	<div id="tab3">from jQuery UI Tabs</div>
</div>

To turn this into a fully featured functioning tab system, all one has to execute in the <head> is this provided you have included jQuery and jQuery UI with any CSS in your <head> (default CSS can be included like such: <link rel=”stylesheet” type=”text/css” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css” />):

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

This tab structure also degrades reasonably without JavaScript – one is able to view the contents of all of the tabs and the anchor links are usable – unlike some other tab techniques.

If you found this article helpful or interesting, please help Compdigitec spread the word. Don’t forget to subscribe to Compdigitec Labs for more useful and interesting articles!

Topics: (X)HTML | 7 Comments »

7 Responses to “Creating jQuery UI Tabs”

  1. website Says:
    July 11th, 2024 at 06:26

    … [Trackback]

    […] Info on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  2. big 666 สล็อต Says:
    July 18th, 2024 at 19:56

    … [Trackback]

    […] Information on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  3. เบทนิว 99 Says:
    August 14th, 2024 at 19:00

    … [Trackback]

    […] Information on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  4. AMBKING Says:
    August 14th, 2024 at 21:02

    … [Trackback]

    […] Find More on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  5. Guns For Sale Says:
    September 9th, 2024 at 20:39

    … [Trackback]

    […] Read More here on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  6. fk brno 7.5 Says:
    September 20th, 2024 at 23:39

    … [Trackback]

    […] Info to that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  7. ทำความรู้จัก Spadegaming ค่ายสล็อตอันดับ 1 Says:
    September 22nd, 2024 at 08:28

    … [Trackback]

    […] Find More on on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

Comments