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

13 Responses to “Creating jQuery UI Tabs”

  1. opensea nft Says:
    February 23rd, 2022 at 21:19

    … [Trackback]

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

  2. ip stresser Says:
    March 24th, 2022 at 17:48

    … [Trackback]

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

  3. https://wifina.be/conditions-generales-cofidis/ Says:
    March 29th, 2022 at 04:51

    … [Trackback]

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

  4. DevOps as a service providers Says:
    May 6th, 2022 at 23:56

    … [Trackback]

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

  5. good cvv sites Says:
    June 7th, 2022 at 12:40

    … [Trackback]

    […] Here you can find 37325 more Info on that Topic: compdigitec.com/labs/2011/08/21/creating-jquery-ui-tabs/ […]

  6. L’emprunt travaux dans le cadre d’un nouveau toit | Credit-Personnel.beLe prêt travaux pour un nouveau toit | Credit-Personnel.be Says:
    June 26th, 2022 at 07:51

    … [Trackback]

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

  7. nicotine pouches Says:
    July 15th, 2022 at 07:17

    … [Trackback]

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

  8. salvias divinorum seeds for sale, Says:
    August 26th, 2022 at 11:36

    … [Trackback]

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

  9. อาหารเสริมชายเสริมชาย Says:
    December 6th, 2022 at 18:42

    … [Trackback]

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

  10. Zastava M85 Says:
    December 8th, 2022 at 18:25

    … [Trackback]

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

  11. try this site Says:
    January 15th, 2023 at 18:11

    … [Trackback]

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

  12. Yabo.Club Says:
    January 23rd, 2023 at 18:19

    … [Trackback]

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

  13. mushroom chocolate 6lack Says:
    January 28th, 2023 at 13:18

    … [Trackback]

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

Comments