How to put a whole html page in a div using jquery?
You use the .load()
function:
$("#footballPlayers").load('footballplayers.html body');
Notice the selector after the URL. You can select elements from that page. I think you need the body
, as having nested <html>
tags could end badly.
A few more comments about your code:
You don't use this function more than once. Just shove all of your code into it:
$(function() {
// All of your code here.
});
I prefer this syntax, as it looks more functional and shows you what it does:
$(document).ready(function() {
// All of your code here.
});
Also, your code is really redundant. Try condensing it:
$(document).ready(function() {
$("#your_menu_container div").click(function() {
$(this).load(this.id.substr(3).toLowerCase() + '.html').siblings().html('');
});
});
jQuery("#footballPlayers").load("footballplayers.html");
for more details click here
You can use load
for this:
$("#div1").load("myhtmlpage.htm");