If you are working with JQuery tabs and want to extend the functionality of your tabs beyond the basics, then it’s good to know how to handle the JQuery tabs click event.
In this article I will:
- Review how to add event handling to the JQuery tabs when a tab is clicked
- I will show how to load an iFrame contained in a tab when the tab is selected.
If you like this article, please have a look here for further useful articles about JQuery.
Tabs in JQuery are quite simple to implement, and they add some neat functionality that users will appreciate.
Tabs are a nice way to separate content logically. Without using tabs one often ends up with a single huge form that contains too many fields for a user to process properly.
In some cases users dislike the idea of tabs but it’s really just a matter of preference and getting used to them. And I’m sure that given the choice between a huge single form and a series of logically separated tabs, most users would agree that the tabs option is easiest wo work with.
The basic structure of a tabbed user interface using JQuery UI sets up the tabs horizontally across the top of the Web page going left to right. The tabs are provided to JQuery within an unordered list that is encapsulated within a ‘tabs’ div that the programmer specifies.
Although this may sound somewhat convoluted, its really quite simple. For starters, let’s say we are going to name our main <div tag ‘tabs’.