Simple Tabs w/ CSS & jQuery
Tags: Intermediate, Widgets
I know there are quite a few tutorials out there that demonstrate how to create tabs with CSS & jQuery, but I decided to create my own as well. I’m not sure if the techniques are the same, but hopefully this tutorial will be easy to understand even for a beginner.
For those who are not familiar with jQuery, check out their site for a general overview, and you can also follow up with the various tutorials out there.
Step1. Wireframe – HTML & CSS
Use an unordered list for your tabs, and follow up with the “tab_container” container right below it. Make note that each list item (tabs) has an attribute of “href” that matches the ID of the “.tab_content” div. This will be very important once we have jQuery pull off the actions. Also keep in mind that I used generic names like “tab1″ so its easier to understand. In reality, you should be using keywords so it can semantic and also benefit you in SEO.
No comments:
Post a Comment