Member Avatar for rhuffman8

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.

Edited by rhuffman8 because: n/a
  • 2 Contributors
  • 4 Replies
  • 521 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rhuffman8
Member Avatar for ko ko

Try this one.

<!--
	function Show_Stuff(Click_Menu) 
	// Function that will swap the display/no display for
	// all content within span tags
	{
                var content = document.getElementById(Click_Menu);
		if (content.style.display == "none") 
		{
			document.getElementById(Click_Menu).style.display = "block";
		}
		else 
		{
			document.getElementById(Click_Menu).style.display = "none";
		}
	} 
	-->
Edited by ko ko because: Wrong syntax
Member Avatar for rhuffman8

I could not get this code to work either. I'm not sure if the code lies in the javascript or somewhere in my HTML. I saw the original javascript function work on the example site I was trying to adapt it from, I just can't get it to work for my specific example.

Member Avatar for ko ko 
<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>

Argument must be quoted, like this one onclick="javascript:Show_Stuff('displayx')"

Edited by ko ko because: Wrong code tags
Member Avatar for rhuffman8

that was it. thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.