Ajax Project - Tabbed Page Interface

Didn't find what you want? Try our search

There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here's an example of a tabbed interface using Ajax to load the new pages.

We are going to use the AHAH functions described in the Metatag Grabber project to implement the interface. The pages themselves are simply styled via CSS:

The structure of the tab system contains an unordered list containing the tabs (each tab being a list item) and a DIV containing the content:

<ul id="tabmenu" > <li onclick="makeactive(1)"><a class="" id="tab1">First Page</a></li> <li onclick="makeactive(2)"><a class="" id="tab2">Second Page</a></li> <li onclick="makeactive(3)"><a class="" id="tab3">Third Page</a></li> </ul> <div id="content"></div>

Note that the list element and the content both have an id defined, while the list items themselves have a class which is initially set to null, and a unique id (tab1, tab2,....).

When a user clicks on a pagetab, we want to make that pagetab 'active' and show the associated content. We do this via the makeactive() function attached to the onClick event handler of the relevant list item. Let's have a look at the code in the head section of the page:

<script language="JavaScript" type="text/javascript" src="ahahLib.js"></script> <script language="JavaScript" type="text/javascript"> function makeactive(tab) { document.getElementById("tab1").className = ""; document.getElementById("tab2").className = ""; document.getElementById("tab3").className = ""; document.getElementById("tab"+tab).className = "active"; callAHAH('content.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error'); } </script>

The first line includes the ahahLib.js file containing the AHAH functions. This is described in the Metatag Grabber Project.

Next we have the makeactive function, called when a pagetab is clicked. The first three lines reset the class names of all pagetab to be null. Obviously, if we had more pagetab in our interface, we'd include extra lines here in the same format.

Next we must change the class of the clicked pagetab to 'active'. Since the pagetabs (the list items) have ids of 'tab1', 'tab2' and so on, we can construct the id of the required pagetab using the tab parameter which has been passed to the function. CSS is then used to change how the pagetab appears, based on the new class definition.

In order to display the required content, we can now call our Ajax function, passing the number of the required pagetab as a suffix to the URL. Here's our server-side PHP routine, content.php:

if ($_GET['content'] == 1) { echo 'Content for Page 1'; } if ($_GET['content'] == 2) { echo 'Content for Page 2'; } if ($_GET['content'] == 3) { echo 'Content For Page 3'; }

Finally, let's have a look at the CSS for the tabbed interface:

pre {text-indent: 30px} #tabmenu { color: #000; border-bottom: 1px solid black; margin: 12px 0px 0px 0px; padding: 0px; z-index: 1; padding-left: 10px } #tabmenu li { display: inline; overflow: hidden; list-style-type: none; } #tabmenu a, a.active { color: #aaaaaa; background: #295229; font: normal 1em verdana, Arial, sans-serif; border: 1px solid black; padding: 2px 5px 0px 5px; margin: 0px; text-decoration: none; cursor:hand; } #tabmenu a.active { background: #ffffff; border-bottom: 3px solid #ffffff; } #tabmenu a:hover { color: #fff; background: #ADC09F; } #tabmenu a:visited { color: #E8E9BE; } #tabmenu a.active:hover { background: #ffffff; color: #DEDECF; } #content {font: 0.9em/1.3em verdana, sans-serif; text-align: justify; background: #ffffff; padding: 20px; border: 1px solid black; border-top: none; z-index: 2; } #content a { text-decoration: none; color: #E8E9BE; } #content a:hover { background: #aaaaaa; }


Think this may help others? Please share ...Google+FacebookPinterestStumbleUponLinkedInTwitter

Before using any software from this site, please see the Terms

2 Users Online.

All of the code and information on this site is provided free of charge (but without warranty).
If you feel that the site has been useful, you may care to donate a little toward the running of the site and the development of further projects?