Most of the times it is dull to have that long scrolling HTML pages with anchor tags to display many products, all in one page. Java Script can be used to display all the products or information in one row depending upon the links clicked. You would understand if your see the example below.
HOW IT WORKS
First the details of individual products are enclosed in <span> tag and specifiying a unique id to the span tag. Like <span id=”1″></span>. All the span tags are included with style display equal to none. i.e., <span id=”1″ style=”display:none;”></span>. Then seperate links are created in the top horizontally or vertically for all the products. When each links are clicked a java script function is called to display the details corresponding to that particular link and to hide the previous text or details. This is achieved by dynamically altering the display value to ‘null’ for the active product details and display value to ‘none’ for all other product details.
The code snippet is given below. Though the code looks very lengthy it is very simple to understand.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Same Page Navigation using Java Script</title>
<script language="JavaScript" type="text/javascript">
<!--
function show_details(Menu_Clicked, menu1, menu2, menu3)
// Function to display the details of individual products and hide the previous text.
{
if (Menu_Clicked.style.display == "none")
{
Menu_Clicked.style.display = "";
menu1.style.display = "none";
menu2.style.display = "none";
menu3.style.display = "none";
}
}
-->
</script>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="left" valign="top">
<a href="javascript:show_details(display1, display2, display3, display0)" onMouseOver="window.status='';return true">Product1</a>
<a href="javascript:show_details(display2, display1, display3, display0)" onMouseOver="window.status='';return true" onclick="window.status='';return true">Product 2</a>
<a href="javascript:show_details(display3, display1, display2, display0)" onMouseOver="window.status='';return true">Product 3</a>
</td>
</tr>
<tr>
<td>
<span id="display0" style="">Default Text about all the product in general</span>
<span id="display1" style="display:none">Details of Product 1</span>
<span id="display2" style="display:none">Details of Product 2</span>
<span id="display3" style="display:none">Details of Product 3</span>
</td>
</tr>
</table>
</body>
</html>
This code can also be used to create a simple photo gallery.