JAVASCRIPT

ACP Tab Web Page

A tab web page is a perfect candidate for the technology of Active Client Pages (ACP). It's a web page with buttons at the top. When you click a button, all the HTML content below the line of buttons changes. It is as if each button has a page hidden in it. ACP makes loading those pages go much more quickly.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 1

October 19, 2009

TABLE OF CONTENTS:

The loading of the first file should be done in such a way that when the user clicks the tab for the first real page, after clicking the tab for the second or third real page, the content of the first real page should be available. You can say that this statement stores the content of the first real page.

The JavaScript in the Head Element

The JavaScript in the HEAD element begins with the following three lines:

tab1Page = "";

tab2Page = "";

tab3Page = "";

Each of these variables will hold the string content of a page. The first one holds the content for the first tab, the second one holds it for the second tab and the third holds it for the third tab. The string values for the content are assigned in the code. Next in this script, you have the following function:

function showTabPage(butNo)

{

switch(butNo)

{

case '1':

document.getElementById('D1').innerHTML = tab1Page;

break;

case '2':

document.getElementById('D1').innerHTML = tab2Page;

break;

case '3':

document.getElementById('D1').innerHTML = tab3Page;

}

When any tab is clicked, this is the function that is called. The function receives the button number of the tab clicked as an argument. In this example I used string instead of integer for the button number.

The function has a switch statement. If the button number is "1," the first case replaces the content of the DIV element with value of the tab1Page variable. The ID of the DIV element is "D1." If the button number is "2," the first case replaces the content of the DIV element with the value of the tab2Page variable. If the button number is "3," the first case replaces the content of the DIV element with the value of the tab3Page variable. This is how the page content is changed.

Next: The Ajax Functions >>