Horizontal Tabs simulates the interface of offline real world being accessed by each computer user. However, implementing tabbed navigation can be quite difficult sometimes, especially for non-developers.
If you are thinking to use the tabbed navigation then you can easily implement it through jQuery. Do you know how? Here, we will discuss how to implement the Horizontal Tabbed Navigation through jQuery. We will also put a highlight to add the implementation of effects like Collapse, Sorting, and Mouseover.
Let us start now from a blank html file. We are adding following default code to it:
Now, we will link the default jQuery CSS and JS files with our HTML file.
This is the time to add the script code to create the tab interface.
This is the default script to create the tabs without any effects.
Now, we will create the tabs using ul and li tags, and add the contents in them. For this work, the jquery-ui-1.8.13.custom CSS file have the classes like tabs-1 for 1st Tab, tabs-2 for 2nd tab, and tabs-3 for 3rd tab. You can edit the CSS file to have more classes to create more tabs in your design. Following is the code to create three tabs:
After merging the complete HTML code will be as following. You can also copy this code for your work.
Welcome to jQuery Tabs
Following will be the output of the tabs created with above code:
Thinking to add the effects in tabs?
You have to add only event: “mouseover” in the scripts code as show below:
Remember to remove the previously existing script code with this one. After adding this code, the tabs will toggle on moving a cursor above them.
Want your tabs to expand and collapse with a click, then replaces the existing tab code with this one:
Want to allow the visitors to sort the tabs as per their requirements, just add following code.
Positioning Tabs on Bottom
Thinking to position the tabs on the bottom of content! For this, you have to add some more customization through style tag, change the script code, and change the HTML code.
Style sheet Code
Now, you have to add the above mentioned tabs-bottom class to the div creating tabs.