|
#1
10-20-2009, 03:44 AM
|
|||
|
|||
|
ajax menus
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;}
|
 |
| Bookmarks |
«
Previous Thread
|
Next Thread
»
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
Linear Mode
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Problems with Ajax and css | Michael | ASP.NET | 2 | 07-28-2009 06:06 AM |
| Ajax and Browser Positioning | dbrook007 | AJAX | 0 | 04-22-2008 08:40 AM |
| Ajax within Ajax generated code | geekdesign | AJAX | 2 | 09-16-2007 09:38 PM |
| using an AJAX function to return a value | k285715 | AJAX | 0 | 06-18-2007 12:06 PM |
| New forum + some AJAX links | Lori | AJAX | 0 | 02-09-2006 02:26 PM |
All times are GMT -4. The time now is 11:50 PM.