page, but nothing responds. Below is a simple sample page created to
show what I want to accomplish.
Also, I'm using JQuery 1.3.
----- index.html -----
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mainview").load("page01.html");
$("#clickme").click(function(){
$("#mainview").load("page02.html");
});
$("#clickme2").click(function(){
$("#mainview").load("page03.html");
});
$("#clickme3").click(function(){
$("#mainview").load("page04.html");
});
});
</script>
</head>
<body>
<div id="mainview"></div>
</body>
</html>
----- END of index.html -----
----- page01.html -----
<html><head></head><body>
<p>This is page01.html</p>
<div id="clickme">Click Me!</div>
<p>some stuffs</p>
</body>
</html>
----- END of page01.html -----
----- page02.html -----
<html><head></head><body>
<p>This is page02.html</p>
<div id="clickme2">Click Me!</div>
<p>some more stuffs again</p>
</body>
</html>
----- END of page02.html -----
----- page03.html -----
<html><head></head><body>
<p>This is page03.html</p>
<div id="clickme3">Click Me!</div>
<p>some more stuffs again</p>
</body>
</html>
----- END of page03.html -----
When the index.html page loads up, the page01.html loads into
#mainview.
And when I try to click on the <div id="clickme">Click Me!</div>
inside page01.html to load page02.html, nothing works.
Just can't figure out what's wrong... If someone knows an easy trick,
please help me out. Thank You!
No comments:
Post a Comment