Display Object in The Same Page after Click on Hyper-Link
Question
I am working on a web page that will go on pure HTML5 and small Javascript.
I want to create menu near page text, that will include and display the contens of other html page when i click on one of the menu links. like that:
http://i.stack.imgur.com/ravwC.png
I read about frames and i frames and i decided that i dont want to use them, but to use Object instead.
Here what i have i mind:
<center>
<right>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</right>
<left>
<object data="text.html" type="text/html"></object>
</left>
</center>
How do i display and change the contents from other html file in the same page, while clicking on menu link?
3 answers
solution1
0 2015-01-16 10:58:08
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> <script language="JavaScript"> function doPage() { var objTag = document.getElementById("contentarea"); if (objTag != null) { objTag.setAttribute('data', 'http://stackoverflow.com/'); alert('Page should have been changed'); } } </script> </head> <body> <form name="Form1" method="POST"> <p><input type="button" value="Click to change page" onclick="doPage();" /></p> <object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="http://stackoverflow.com/"></object> </form> </body> </html>
solution2
0 ACCPTED 2015-01-16 12:19:57
Here is how I would consider doing it
<right>
<ul id="nav">
<li><a href="page1.html">link 1</a></li>
<li><a href="page2.html">link 2</a></li>
<li><a href="page3.html">link 3</a></li>
</ul>
</right>
<left>
<div id="content"></div>
</left>
$(function() {
$("#nav > li > a").on("click",function(e) {
e.preventDefault(); // stop the link
$("#content").load(this.href); // href must come from same origin as the script
});
});
UPDATE
Since some browsers do not allow local pages to be ajaxed (which is what .load does) why not just use an iFrame on your harddisk based pages - it will work on all browsers without ANY script:
<right>
<ul id="nav">
<li><a href="page1.html" target="if1">link 1</a></li>
<li><a href="page2.html" target="if1">link 2</a></li>
<li><a href="page3.html" target="if1">link 3</a></li>
</ul>
</right>
<left>
<iFrame name="if1"></iframe">
</left>
solution3
-1 2015-01-16 10:48:47
You can put onclick action on each of the links.
Based od your example: $("object").attr("data","text2.html");
Something like:
<center>
<right>
<li onclick="$('object').attr('data','text1.html')">link 1</li>
<li onclick="$('object').attr('data','text2.html')">link 2</li>
<li onclick="$('object').attr('data','text3.html')">link 3</li>
</right>
<left>
<object data="text1.html" type="text/html"></object>
</left>
</center>
I headnt icluded a head tag. You have to use jquery.
Works jst fine: http://jsfiddle.net/rws8pa8z/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.