Breaking News
You are here : Home / Web Design / Javascript/Jquery / Easy Tabs Using Jquery
Jquery Tabs Tutorial

Easy Tabs Using Jquery

Easy Tabs Using Jquery :

Easy Jquery Tabs Intro : Hello Guys ! Jquery Tabs Are used every where and also its been a long time since i posted some jquery Tutorial,So i m today put a simple tutorial which elaborate how to create jquery tabs without using the Jquery UI.The Easy Tabs Using Jquery is gonna be very very easy ,so i’d say its a begginer level.So lets just dont waste time and see how we create the tabs using Jquery.

[separator /]

Easy Jquery Tabs Tutorial : [google size=”small”/]

Lets move on the Tutorial To understand how to create tabs in jquery.For leaning this you do not need to have extraordinary skills.you just need to understand html ,css and Jquery Off course .So Get started and see all the steps to create Jquery easy tabs .

Creating Tabs using Jquery  : Html Structure :

So lets take a look at Html Structure .The basic structure needed for Jquery tabs to work.you can easily Understand this ..here we have an wrapper div and then tabs list as unordered list which will serve as each tab.the there is tab-container div which holds the content for each of the tab .we have 4 tabs in list so we’ll have four div’s inside tab-content div.each with unique id and calss=’tab-content’.

Now we move towards some styling  for these Jquery tabs.

[separator/]

Easy Tabs using Jquery  : CSS Code –

So Now we have basic structure .we’ll style it .here is a style that i’ve used.take a quick look as this will make your jquery tabs look like tabs.

Now lets move towards the Jquery code where the real magic begins.

[separator/]

Easy Tabs using Jquery  : jquery Code –

The below is the Jquery code for the Jquery Easy tabs.it is really the heart of this tabbed interface.Now lets so what it does.This code on load of the page just hides all the content,then after that shows the only first one by adding the current class to it.that is what happen on load.

Then On click event on the unordered list element ,it removes the current class from the tab on which it is applied and after that it applies that class on the clicked element.That is how our Jquery easy tabs work.And this tiny code is more optimized rather than using UI if you only need tabs somewhere.

[separator /]

Easy Tabs Using Jquery : Demo –

Please take a look at demo how these tabs will look like.

[jbutton size=”large” icon=”globe” link=”http://demo.designaeon.com/easy-tabs/” newpage=”yes”]Live Demo Jquery Tabs[/jbutton]

[separator /]

Creating Jquery Tabs : Download sample –

you can also download jquery tabs working sample from the link below:

[jbutton size=”large” icon=”download” link=”http://download.designaeon.com/easy-tabs.rar”]Download Jquery Easy Tabs [/jbutton]

Tnx for visiting on designaeon.com and reading this article .Please share if you like our content.Keep visiting for more jquery tutorials.

[separator/]

Tags : , , , , , ,

3 Replies

  1. Zombi says:

    Thank u……………..

  2. Jerzu says:

    best tutorial ever!

  3. Matt says:

    Thank you so much. I implemented this in my lunch hour. So easy. I’m so glad you posted this as I so much prefer simple jquery than messing with plugins. All I have to do is change my colors and descriptions and dimensions. Thank you!!

Leave a Reply

Want to join the discussion ? Feel Free to contribute !