Easy steps to create Jquery Tabs !!!

[dropcap]T[/dropcap]abs 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 used:

  1. Tabs must be in a list either ordered(<ol>) or unordered(<ul>).
  2. Each tab title must be within each <li> and wrapped by anchor (<a>) tag with an href attribute.
  3. 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 that 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.

How to implement it ?

1. Download Jquery library or else u can add direct script. For example

2. Add tabs to your html code

3. Now add script for tabs

Done !!! Your Jquery Tab is ready.

Karan Palav

Karan Palav

An enthusiast, creative web designer & developer working for Spryox.com

You may also like...

Leave a Reply

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