Getting started with JQuery UI Tabs

JQuery UI Tabs allows you to create HTML tabs in a very simple fashion. Listed below are the different steps you need to take:

1. Add a reference to the JQuery javascript files

1. Add a reference to a JQuery UI css

1. Create your tabs by adding an unordered list in a div – note the href=”#tabs-1” part which points to the id of a div which will contain the tab content

1. Create the divs which will contain the tab content

1. Initialize your tabs by adding some javascript code

Finally your code should look this

 

Some interesting references:

• JQuery UI Tabs Styling
• JQuery UI Tabs samples

Tags van Technorati: JQuery,Javascript,tabs,HTML