hi
i have created one simple page using ajax ,my index page contains menus page1 page2 page3 page4 if i click the page2 menu means my page2.html is opening in the same window index.html itself ,but in my page three i have a link if i click that link it is opening in a new page that link also i want in the same index.html page go through my code and help me out i want to do be done this without iframes

Code:
 this is my index.html

<html> <head><link rel="stylesheet" type="text/css" href="tab.css"/><script type="text/javascript" src="ajax_navigation.js"></script></head> <body><ul class="displaytabs"><li><a id="page1" href="javascript:void(0)" onClick="open_page('page1.html','content'); javascript:change('page1');"style='border-bottom-color:white;'>page1</a></li><li><a id="page2" href="javascript:void(0)" onClick="open_page('page2.html','content'); javascript:change('page2');">page2</a></li><li><a id="page3" href="javascript:void(0)" onClick="open_page('page3.html','content'); javascript:change('page3');">page3</a></li><li><a id="page4" href="javascript:void(0)" onClick="open_page('page4.html','content'); javascript:change('page4');">page4</a></li></ul> <div id="content" style="border:1px solid gray; width:94%; margin-bottom: 1em;"><table align=center width=90%><tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">Page1</td></tr></table></div></body></html> this is my index.html

<html>

<head>
<link rel="stylesheet" type="text/css" href="tab.css"/>
<script type="text/javascript" src="ajax_navigation.js">
</script>
</head>

<body>
<ul class="displaytabs">
<li><a id="page1" href="javascript<b></b>:void(0)" onClick="open_page('page1.html','content'); javascript<b></b>:change('page1');"style='border-bottom-color:white;'>page1</a></li>
<li><a id="page2" href="javascript<b></b>:void(0)" onClick="open_page('page2.html','content'); javascript<b></b>:change('page2');">page2</a></li>
<li><a id="page3" href="javascript<b></b>:void(0)" onClick="open_page('page3.html','content'); javascript<b></b>:change('page3');">page3</a></li>
<li><a id="page4" href="javascript<b></b>:void(0)" onClick="open_page('page4.html','content'); javascript<b></b>:change('page4');">page4</a></li>
</ul>

<div id="content" style="border:1px solid gray; width:94%; margin-bottom: 1em;">
<table align=center width=90%>
<tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">
Page1</td></tr></table>
</div>
</body>
</html>
Code:
 this is my page1.html

<html><table align=center width=90%><tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">Page 1</td></tr></table></html> this is my page1.html

<html>
<table align=center width=90%>
<tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">
Page 1
</td></tr></table>
</html>
Code:
 this is my page3.html 

<html><table align=center width=90%><tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">Page 3</td></tr><tr><td align=left style="font-size:13px;padding:5x;color:#3D366F;font-family:arial,verdana;"><a href="page4.html">click</a></td></tr></table></html> this is my page3.html

<html>
<table align=center width=90%>
<tr><td align=left style="font-size:13px;padding:5px;color:#3D366F;font-family:arial,verdana;">
Page 3
</td></tr>
<tr>
<td align=left style="font-size:13px;padding:5x;color:#3D366F;font-family:arial,verdana;">
<a href="page4.html">click</a>
</td>
</tr>
</table>
</html>
Code:
 this is my ajax_navigation.js file

function change(which){   if(which=="page1")   {      document.getElementById(which).style.borderBottomColor="white";      document.getElementById("page2").style.borderBottomColor="#778";     document.getElementById("page3").style.borderBottomColor="#778";     document.getElementById("page4").style.borderBottomColor="#778";   }   else if(which=="page2")   {     document.getElementById(which).style.borderBottomColor="white";     document.getElementById("page3").style.borderBottomColor="#778";     document.getElementById("page4").style.borderBottomColor="#778";     document.getElementById("page1").style.borderBottomColor="#778";   }   else if(which=="page3")   {     document.getElementById(which).style.borderBottomColor="white";     document.getElementById("page4").style.borderBottomColor="#778";     document.getElementById("page1").style.borderBottomColor="#778";     document.getElementById("page2").style.borderBottomColor="#778";   }   else if(which=="page4")   {     document.getElementById(which).style.borderBottomColor="white";     document.getElementById("page1").style.borderBottomColor="#778";     document.getElementById("page2").style.borderBottomColor="#778";     document.getElementById("page3").style.borderBottomColor="#778";   }} var please_wait = null;function open_page(url,target){ if(!document.getElementById)  {	   return false; } if(please_wait != null)  {   document.getElementById(target).innerHTML = please_wait;  } if(window.ActiveXObject)  {    link = new ActiveXObject("Microsoft.XMLHTTP");  } else if(window.XMLHttpRequest)  {    link = new XMLHttpRequest(); } if(link == undefined)  { 	return false; } link.onreadystatechange = function() { response(url, target);   } 	link.open("GET", url, true);	link.send(null);}function response(url, target) {       if(link.readyState == 4)   {    set_loading_message("<img src='load-image.gif'>");    document.getElementById(target).innerHTML = link.responseText;  }}function set_loading_message(msg) {       	please_wait = msg;}