How to open hyperlinks between different divs
Forgive me if this is a newbie question - but sadly that's what I am.
I have an index.html containing two divs (id's #A and #B). From the main page I can click a link to be opened in div #A using the following:
<a href=page_to_开发者_如何转开发open_in_A.html onClick="load_A(this); return false;">link in index</a>
function load_A(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("A").innerHTML=parsedhtml;
}
So far so good. But now I want to click a link inside div #A to open in div #B. I tried the following:
<a href=page_to_open_in_B.html onClick="load_B(this); return false;">link in A</a>
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
document.getElementById("B").innerHTML=parsedhtml;
}
All this does is open the second link inside div #A.
I suspect there is something wrong with the scoping of the div id's, but I can't figure out how to remedy it.
Thanks in advance for taking pity on me!
EDIT: minimal html example using the above functions
Here is the index.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href=one.html onClick="load_A(this); return false;">link_to_A</a>
<div id=A>one</div>
<div id=B>two</div>
</body>
</html>
where funs.js contains the functions load_A() and load_B() above. The divs are described in style.css:
#A { position: absolute; top: 10%; left: 10%; width: 20%; }
#B { position: absolute; top: 10%; right: 10%; width: 20%; }
and the files one.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of one.
<a href=two.html onClick="load_B(this); return false;">link_to_B</a>
</body>
</html>
and two.html:
<html>
<head>
<script src="funs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Contents of two
</body>
</html>
Thanks again for your help!
If you aren't getting a javascript error then it probably means that your script is grabbing some other element. Check your entire html page and make sure that you do not have any other elements (not just divs) on the page with the id of 'B'.
Also, make sure that you don't have any malformed html. A missing or mismatched closing tag and div #B does not exist in the DOM.
It would also help if you could post the full html related to the divs.
After much trial-and-error and some judicious Googling I realised that my load_B() function should get look for the element id in the parent of the current div:
function load_B(page)
{
parsedhtml='<object type=text/html data="'+page.href+'"><\/object>';
parent.document.getElementById("B").innerHTML=parsedhtml;
}
加载中,请稍侯......
精彩评论