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 | 2 Comments »

2 Responses to “Creating jQuery UI Tabs”

  1. how much is an african grey parrot Says:
    March 30th, 2024 at 00:35

    … [Trackback]

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

  2. Best car accessories, Car accessories online, Affordable car accessories,Top-rated car accessories, Car accessories for sale, Custom car accessories, Car interior accessories, Car exterior accessories, Car gadgets and accessories, Car accessories shop near me, Trendy fashion accessories, Fashion accessories for women/men, Affordable fashion accessories, Stylish fashion accessories, Designer fashion accessories, Fashion accessories online, Fashion accessories shop/store, Unique fashion accessories, Fashion accessories for special occasions, Fashion accessories for outfits, Home decor trends, Garden landscaping ideas, DIY home projects, Sustainable gardening tips, Outdoor living spaces, Indoor plant care, Home organization hacks, Smart home technology, Patio furniture sets, Kitchen remodel ideas. Says:
    April 14th, 2024 at 05:15

    … [Trackback]

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

Comments