I'd like to display content from different links in the same page
I have two divs. One on the left and one on the right.
The one on the left will display links and whenever clicked, the content will appear on the right div.
I've been trying to do it with Iframe and javascript but I can't seem to get it right. I'm still a 开发者_如何转开发beginner and I have been searching all over the internet sigh.
Any ideas?!
Thanks
You have a couple choices in order to achieve this.
The easiest way is to have all the content separated in divs with an id in the right div. Hide all but the first link. The links on the left would have these ids linking to the corresponding content. When a link is clicked hide all, to clear the right div, and show the id that was clicked.
The other choice is AJAX which isn't as accessible as the first choice since if Javascript is off it won't work. For the first choice if Javascript is off the content will just be displayed and upon clicking the links it will scroll to the content.
You can use the DOM to achieve something like that...have a look at http://www.w3schools.com/jsref/default.asp it has some good examples there...
If you want to display information in another DIV, you should use AJAX. If you would like to use a navigation frame, check this.
You can easily do this by using the jQuery and jQuery UI library. http://jqueryui.com/demos/tabs/#ajax The jQueryUI tabs can load remote content.
In your link's onClick, you can change the src of the iframe to the link's href and that should automatically change the iframe's contents.
Hey Jasmin, you could do something like this. Please note this solution is without a javascript framework. But you should definetly look into a framework lik jquery or prototype. Let's say you have:
<html><head>...</head><body>
<ul>
<li><a href="www.google.com" id="firstLink" >GOOGLE</a></li>
<li><a href="www.twitter.com" >Twitter</a></li>
<li><a href="www.tumblr.com" >Tumblr</a></li>
</ul>
<div><iframe name="TEST" src="about:blank" id="ts" ></IFRAME></div>
PUT THE SCRIPT TAG CLOSE TO THE BOTTOM OF YOU PAGE FOR SAKE OF PAGESPEED
BETTER PUT EVERYTHING IN AN EXTERNAL JS SCRIPT
<script laguage='javascript'>
addLoadListener(initEvents);
function initEvents()
{
var mylink = document.getElementById("firstLink");
mylink.onclick = changeFrame(mylink.href);
return true;
}
function changeFrame(url)
{
//OPEN URL IN IFRAME WITH ID = ts
document.getElementByID('ts').src=url;
return false; // IS NEEDED TO SKIP THE NORMAL BEHAVIOUR OF THE LINK
}
// THIS FUNCTION IS NEEDED TO HAVE THE JS READY WHEN THE PAGE IS LOADED
function addLoadListener(fn)
{
if (typeof window.addEventListener != 'undefined')
{
window.addEventListener('load', fn, false);
}
else if (typeof document.addEventListener != 'undefined')
{
document.addEventListener('load', fn, false);
}
else if (typeof window.attachEvent != 'undefined')
{
window.attachEvent('onload', fn);
}
else
{
var oldfn = window.onload;
if (typeof window.onload != 'function')
{
window.onload = fn;
}
else
{
window.onload = function()
{
oldfn();
fn();
};
}
}
</script>
</body></html>
加载中,请稍侯......
精彩评论