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 without iframes
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 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 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 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;
}