Here is the simplified Code to Load external External page into a Selected DIV!! Here what we loading HTML page basis on tht Page name.
<html>
<head>
<title>AJAX with jQuery Example</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
#wrapper {
width: 240px;
height: 80px;
margin: auto;
padding: 10px;
margin-top: 10px;
border: 0px solid black;
text-align: center;
}
#quote{ border:2px solid #ccc;}
</style>
</head>
<body>
<div id="wrapper">
<script type="text/javascript">
$(document).ready(function(){
//here we Defaulty loding Index.html page into a DIV called "quote"
$("#quote").load("index.html");
$(".anil").mouseover(function(event){
// here we loading page on basis of .html extension. So we need to specify html page to the link.(ex: to load home.html we specifying id="home"
$("#quote").load(event.target.id+'.html')
});
});
</script>
<a href="javascript:" class="anil" id="home">anil</a>
<a href="javascript:" class="anil" id="aboutus">Nail</a>
<div id="quote"><!--Content will Load here--></div>
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment