Blog | Tutorial

Using Tabs on a page

In recent years I have started to use tabs on some pages, particularyy to group data in a more organised manner. The W3Schools tutorial provides an outline how to perform this.

When your page is generated all the TAB pages are rendered and only the first tab is shown. Performance wise this is ok if there is not too much information to be presented.

My issue is that in some cases if there are 6 tabs with heavy data useage it can take some tome to load up and show the whole page.

To get round this I decided to keep the top part of the Tabbed structure (a UL list) and then use ajax calls to show the data for that tab. The benefit of this is that ionly one tab of information is rendered at a time and if one tab is updated and you select another tab then any related data will automatically be rendered in that newly selected tab.

" ;