jQuery Tabs without a plugin!
There are piles of jQuery tabs plugins out there, but creating tabs is not very complicated at all. In this video, I’ll step you through creating simple tabs with just a few lines of code.
We get started by setting up our HTML – first we create the content for each tab section, giving each section of content a unique ID so that we can easily reference it later. Note that we use semantic names for those ID’s related to the information contained inside rather than just numbering the sections – that means it’s super easy for us to re-arrange the order of our content as needed without having to worry about re-naming.
Then we create the tabs themselves – which is as simple as an unordered list with anchor links to the sections of content we created. We style that up with just a few lines of CSS to make the list of links look like tabs and to add a background color and border to each section of content. We’ll cover a quick trick for improving the usability of your tabs which will also help you with all sorts of navigation, buttons, and more.
Next, we take a look at how to highlight the currently selected tab by adding and removing a CSS class. Finally, we add just a bit of code to show the first content section when the page is first loaded.