I assume some basic knowledge on HTML/CSS, PHP and Javascript.

Problem:
Creating a Tab navigation menu with an active state menu item with javascript and update corresponding content width Ajax.

Here is a screenshot of the final solution:

You can see the final solution here.

Solution:

Part 1


1. Create the following file structure:
   • index.php - main file;
   • main.css - to style everything;
   • protoype.js - download Prototype library here;
   • content.php - the file with the content that will be used to update some div in index.php
2. Open your index.php file and add tho following code in the body:
   1.  
   2. <div id="wrap">
   3.         <div id="mainNav">
   4.         <ul>
   5.         <!– set the default active menu item to "active" and others to "inactive –>
   6.         <li><a id="event1" class="active" href="#">Tab 1</a></li>
   7.         <li><a id="event2" class="inactive" href="#">Tab 2</a></li>
   8.         <li><a id="event3" class="inactive" href="#">Tab 3</a></li>
   9.         </ul>
   10.         </div>
   11.         <div id="content"></div>
   12. </div>
   13.  

   Take your time to look at this structure to understand it.
   Basically you have two divs. One will be the main navigation, and the other, the content.
   Why the content div is empty? Well the contents of this div will be in content.php and will be inserted here with Ajax.

3. Now, open your content.php and insert the following code:
   1.  
   2. <?php
   3.     if($_GET[‘menu’] == ‘1′) {
   4.         echo "<h1>Content 1</h1>
   5.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   6.        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
   7.        id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>";
   8.     }
   9.     if($_GET[‘menu’] == ‘2′) {
   10.         echo "<h1>Content 2</h1>
   11.        <p>Vivamus pharetra posuere sapien.
   12.        Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci,
   13.        fermentum bibendum enim nibh eget ipsum.
   14.        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   15.        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
   16.        id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
   17.        id velit vitae ligula volutpat condimentum.</p>";
   18.     }
   19.     if($_GET[‘menu’] == ‘3′) {
   20.         echo "<h1>Content 3</h1>
   21.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   22.        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
   23.        id pulvinar odio lorem non turpis.</p>
   24.        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   25.        Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
   26.        id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse
   27.        id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
   28.        Sed quis velit. Nulla facilisi. Nulla libero.</p>";
   29.     }
   30. ?>
   31.  

Content.php has 3 different sections. It displays different content according to the parameter in the URL (menu=1, 2 or 3). You probably already gessed why do we have this three options. According to the Tab you select, content div will be updated with content.php?menu=1, content.php?menu=2 or content.php?menu=3.
Now that you have your index.php and your content.php ready I’ll have to give you a small explanation about the Ajax.Updater function.

As you can see, when you call the Ajax.Updater function, it receives 2 (3 optional) parameters:

1. container: some div;
2. url: url to the file that will be inserted inside the container specified in the first parameter;
3. [options]: aditional options.
   You can see a complete list of the options available here.

Example:

In this example, the div with id=”content” will be updated with products.php?item=1.

In this second part you’ll use the Ajax.Updater function to insert the contents of content.php inside the div with id=”content”.

Part II
1. The first thing you have to do is to link the Prototype library inside your index.php. To do this insert the following code between the “head” tags:
   1. <script type="text/javascript" src="./prototype.js"></script>
2. Now lets add some javascript between “script” tags:
   • open script tag:
     1. <script type=’text/javascript’>
   • Call Event.observe function in order to run the code AFTER the window loads:
     1.  
     2. <script type=‘text/javascript’>
     3. //as soon as page loads
     4. Event.observe(window,‘load’, function(event) {
     5.     //call Ajax.Updater and update default content
     6.     new Ajax.Updater(‘content’,‘./content.php’, { method:‘get’, parameters:"menu="+"1" });
     7.     //Add listenners to each one of the Tab links
     8.     Event.observe($(‘event1′), ‘click’, function(event) {
     9.         //if click on link with id="event1"
     10.         //set the class of "event1" to "active"
     11.         $(‘event1′).className = ‘active’;
     12.         //set other link’s classNames to "inactive"
     13.         $(‘event2′).className = ‘inactive’;
     14.         $(‘event3′).className = ‘inactive’;
     15.         //call the Ajax.Updater function to update the contents
     16.         //inside <div id="content"> with content.php?menu=1
     17.         new Ajax.Updater(‘content’, ‘./content.php’, { method: ‘get’ , parameters:"menu="+"1"});
     18.         //stop Event.observe
     19.         Event.stop(event);
     20.     });
     21.     //Same for the other two links
     22.     Event.observe($(‘event2′), ‘click’, function(event) {
     23.         $(‘event1′).className = ‘inactive’;
     24.         $(‘event2′).className = ‘active’;
     25.         $(‘event3′).className = ‘inactive’;
     26.         new Ajax.Updater(‘content’, ‘./content.php’, { method: ‘get’ , parameters:"menu="+"2"});
     27.         Event.stop(event);
     28.     });
     29.     Event.observe($(‘event3′), ‘click’, function(event) {
     30.         $(‘event1′).className = ‘inactive’;
     31.         $(‘event2′).className = ‘inactive’;
     32.         $(‘event3′).className = ‘active’;
     33.         new Ajax.Updater(‘content’, ‘./content.php’, { method: ‘get’ , parameters:"menu="+"3"});
     34.         Event.stop(event);
     35.     });
     36.     //stop first Event.observe
     37.     Event.stop(event);
     38. });
     39. </script>
     40.  

Ok, last step, style everything according to your preferences using the “main.css” file (don’t forget to link this file to your index.php file). Now you have the classes “.active” and “.inactive” to style the different tags.

If you have any doubts, comments or suggestions, fell free to post a comment on this article.

Regards,
Tiago