To start this example, download the following html document: http://jeffkilroy.com/hosted/Class/AdvancedWeb/Misc/javascript_3_start.html (You can right click the link and go to File>Save As)

You can see in this file we have our HTML and CSS already completed, in our HTML we list out 4 different divs that each have a similar id name: box_productinfo, box_news, box_images, box_buy. We will think of each of these divs as pages, what we want to happen is whenever we click a button in the navigation, it only shows the appropiate div.

So we are ready to jump right in to javascript. Now we already have our CSS tags inside the head and it really doesn't matter where in the head tags we put our script as long as it's not inside any other tag (like <script>). I will be adding the script tags right after our </style> tag:

<script type="text/javascript">
</script>

We haven't touched on javascript arrays yet. You can think of an array as simply a variable that can hold multiple data. So let's imagine we had three similar variables to set up (just an example, don't add to your code):

var book1 = "The Adventures of Huckleberry Finn";
var book2 = "Gulliver's Travels";
var book2 = "Alice In Wonderland";

This may work depending on what we are doing however if we need to loop through each book, there is no (simple) automatic way of doing that because javascript does not see these three different variables as connected in any way. However we can create an array variable, and store each book in the array (Again, no need to add to your code just yet):

var books = new Array();
books[0] = "The Adventures of Huckleberry Finn";
books[1] = "Gulliver's Travels";
books[2] = "Alice In Wonderland";

So to set up the array, we begin by defining a variable that is a new Array object. The following lines add new items to that array. Notice that whenever we start our array, we begin to number from 0 and up, not 1. Now we can tell javascript to perform an action to every one of our books easily.

So let's do this in our code now, what we want to make an array of is the name of each div id that will be able to be hidden / shown:

var allboxes = new Array();
allboxes[0] = "box_productinfo";
allboxes[1] = "box_news";
allboxes[2] = "box_images";
allboxes[3] = "box_buy";

Now we can easily manage each div by talking to the array. So let's create a function that will activate once you click one of the links, and it will alert us of the button pressed.

function showcontent(boxname){
  alert(boxname);
}

So what this function will do is take a parameter (a variable called boxname) and popup a box letting us know what the value of that parameter will be. The key to doing this is making sure the parameter is always the name of the div we want to control, so let's start calling the function.

Back in your html, inside the <ul class="tabnav">, we have our navigation links. Inside each one we need to add an "onclick" attribute. The onclick attribute allows us to call a javascript function once the user clicks the link. So for each link, inside a new onclick attribute, add our function passing the correct div id parameter:

<li><a href="#" onclick="showcontent('box_productinfo')">Product Information</a></li>
<li><a href="#" onclick="showcontent('box_news')">News</a></li>
<li><a href="#" onclick="showcontent('box_images')">Images</a></li>
<li><a href="#" onclick="showcontent('box_buy')">Buy It!</a></li>

Notice I used single quotes to pass the parameter since double quotes are already used up by the onclick attribute. Test out your html file, clicking each link should pop up a box with the parameter (div id) you are passing.

If this is working so far, we are ready to actually make some fun stuff happen. So currenly all the divs are showing up when we only want the one we click on to pop up, so what we are going to have this function do is when you click one of the links, it will look at our "allboxes" array and hide every one of the divs, then it will only show the one we want.

You can comment out the alert in your function, then right after, add the following code:

for(var i=0; i<allboxes.length; i++){
   document.getElementById(allboxes[i]).style.display = "none";
}

So there are a few things we are doing here. First we are creating a "for" loop, which will excecute a block of code a certain number of times. A for loop will always have three sections, each separated by a semicolon.

The first section (var i=0) gives us a starting point. We are creating a new variable (i) for this loop and setting it's value to 0. We can name this variable anything we want, but "i" is a common one you will see in loops.

The next section (i<allboxes.length) tells javascript when the loop will stop. So as long as the value of i is less than the value of allboxes.length, the loop will keep going. But wait! What is allboxes.length?? The .length is an array property that tells us how many items are in a certain array. Because we made 4 different array items, allboxes.length is going to equal 4. So as long as i is less than 4, the loop will continue.

Okay so as long as i is less than 4, the loop will keep going, sounds good but we never do anything to i so it will continue forever! This is the last step (i++). This last section says what to do after each loop. The "++" operator means to increase by 1. So everytime the loop runs, the value of i will increase by one.

If it helps to understand a little better, you may want to put an alert(i); inside the loop so you can see what the value of i is as it runs each loop.

The last line inside of our loop simple modifies each the style of each div and sets the display to "none" so it is hidden. We are calling each array value to get the div id. So for instance, if I were to alert the value of allboxes[1], the value would return as "box_news". Because the variable i is looping through the numbers 0-3, it will go through each of our items one by one and modify its style

So now all of out divs are hidden, which doesn't do us a whole lot of good. Add the following code under your for loop to show only the div that has the id we are passing in the parameter:

document.getElementById(boxname).style.display = "block";

Hopefully that makes sense and clicking each link by now should only be showing that specific div. One last thing we need to do, notice how when we first load the page up everything is showing? We only want the first page to show up. Let's add a function to the onload attribute of the body to show only the first div:

<body onload="showcontent('box_productinfo')">

And there we go! Everything should be functioning nicely.

If you are having trouble with either using loops or the getElementById function, take a look at the related tutorials from w3schools:

javascript for loops - http://www.w3schools.com/js/js_loop_for.asp
javascript getElementById function - http://www.w3schools.com/jsref/met_doc_getelementbyid.asp