Join us on Facebook!

Creating tabs with simple javascript and CSS

by admin 5056 views 0 Comments and 0 Rections

Please Digg, Buzz, ReTweet this Submission. If you liked it push the "Like It" button. Thank You :)

Now a days, tabs are becoming very popular on websites. You may have seen them in many websites including PlanetMaks. Well there are many ways to create such tabs. I will teach you how to create them with ease with just simeple javascript and css. There are only three parts of the code. The CSS part, JavaScript part and Html Part.

Let me first show you the Css Part:

As you can see from the above CSS it is not more then just simple formatting CSS. This code is easily customizable.

The JavaScript:

The script is not more then the chaning of classes on various events. It is easily understandable. See the last function in the script where "3" is bold. If you have more then 3 Tabs you can change this number as "No Of Tabs". The default no. of tabs in this script are "3"

Now for the final part:


Content Of Link 1

In the above HTML "updBtn_Bar" div holds the buttons while the second div holds the containers. If you want to increase the no. of tabs then copy then first make a copy of the button's code and change it name according to its tab number, same thing is to be done with the container. There is no need of any other change execpt for changing the number in javascript that is highlighted.

The complete code can be downloaded from here: tabs.rar (1.46kb)

More Posts in "Tutorials"


blog comments powered by Disqus

Feed Subscription

Get daily inboxed with latest news, reviews and tutorials. Signup now it's free :)

Planetmaks on Twitter

Follow PlanetMaks on Facebook

Recent Comments

Powered by Disqus


32Bit 64Bit 7 Admin Tool Admin Tools Admin-Tool Admin-Tools AdminTool Adobe Adware All-in-One Anti-Spyware Anti-Virus Apple Backup Tools Browser Browsers Changing Default Directory Codec Data Recovery Download Manager Downloads Drive Utilities Driver Drivers Firefox Flash Freeware Google Graphics Internet Tool Internet-Tool Messaging Microsoft Microsoft Tool Micsellonous Monitoring Multimedia Networking News NVidia Office Tool Office-Tool PC Suite Press Release Registry Samsung Security Shareware Software Softwares Tutorials Vista Windows Windows 7 Windows 8