I am trying to make a page, similar to DW, with a menu bar at the top that loads specific content into the body when the links in the menu bar are clicked. I have read a few things about how to do this using javascript but I cannot seem to get it to work.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tennis Shop Database</title>
<link rel="stylesheet"
href="stylesheet.css"
type="text/css" />
<script type="text/javascript">
<!--
function Show_Stuff(Click_Menu)
// Function that will swap the display/no display for
// all content within span tags
{
if (Click_Menu.style.display == "none")
{
Click_Menu.style.display = "";
}
else
{
Click_Menu.style.display = "none";
}
}
-->
</script>
</head>
<body>
<div id="title"><h1>Tennis Shop
<form id="search" method="get" action="search.php">
<input type="text" name="search_query" size="20" />
<input type="submit" value="Search" />
</form></h1></div>
<ul>
<li><input type="button" value="Home" class="menus" onclick="javascript:Show_Stuff(display1)"></li>
<li><input type="button" value="Customers" class="menus" onclick="javascript:Show_Stuff(display2)"></li>
<li><input type="button" value="Stringers" class="menus" onclick="javascript:Show_Stuff(display3)"></li>
<li><input type="button" value="Stringing Machines" class="menus" onclick="javascript:Show_Stuff(display4)"></li>
<li><input type="button" value="String Types" class="menus" onclick="javascript:Show_Stuff(display5)"></li>
<li><input type="button" value="Racquet Types" class="menus" onclick="javascript:Show_Stuff(display6)"></li>
<li><input type="button" value="Place an Order" class="menus" onclick="javascript:Show_Stuff(display7)"></li>
</ul>
<span id="display1">
<h2 class="headings">This is a Test<h2>
<p>This is a test. This is a test.</p>
</span>
<span id="display2" style="display: none"><h2 class="headings">Page Header<br/><br/><hr/></h2>
<p class="text"><!--Any text for the page (before tables) goes here--></p>
<!--EXAMPLE CUSTOMER TABLE-->
<table>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>21 Jump Street<br/>New York, New York 12345</td>
<td>123-456-7890</td>
<td>generic@hotmail.com</td>
<td><input type="button" name="deletebtn" class="buttons" value="Delete" onclick=""<!--Delete--></input></td>
<td><input type="button" name="editbtn" class="buttons" value="Edit" onclick=""<!--Edit--></input></td>
</tr>
<tr>
<td>2</td>
<td>Jame</td>
<td>Jameson</td>
<td>123 Abc Road<br/>Boston, MA 54321</td>
<td>143-652-8421</td>
<td>names@hello.com</td>
<td><input type="button" name="deletebtn" class="buttons" value="Delete" onclick=""<!--Delete--></input></td>
<td><input type="button" name="editbtn" class="buttons" value="Edit" onclick=""<!--Edit--></input></td>
</tr>
</table>
</span>
</body>
</html>I only have it set up for the first two links. The first one is supposed to display the "test" text and the second one is supposed to display the table listed below. However, when I show the page, the header shows up but the links do not display the proper data.
Also, if this can be changed so the elements in the menu bar are hyperlinks rather than input buttons, that would work out better but I wasn't sure if one would work and the other wouldn't.
