HTML and CSS Reference
In-Depth Information
Here's the full source code for the page:
<!DOCTYPE html>
<html>
<head>
<title>
Learn More About South America
</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript” charset=”utf-
8”></script>
<script type=”text/javascript” charset=”utf-8”>
$(function () {
$(“#country”).hide();
$(“p.countryOption a”).click(function (event) {
event.preventDefault();
$(“p.countryOption”).fadeOut();
$(“#country”).load($(this).attr('href'));
$(“#country”).fadeIn();
});
});
</script>
<style type=”text/css” media=”screen”>
#country { border: 1px solid black; padding: 15px; }
p.question { font-size: 200%; }
</style>
</head>
<body>
<p class=”question”>
Which country would you like to know more about?
</p>
<div id=”country”>
Foo
</div>
<p class=”countryOption”><a href=”countries.html #uruguay”>
Uruguay
</a></p>
<p class=”countryOption”><a href=”countries.html #paraguay”>
Paraguay
</a></p>
</body>
</html>
To read about other AJAX-related methods offered by jQuery, take a look at the jQuery
API documentation. Most of the other jQuery methods are more suitable to application
development, but they essentially work in a similar fashion to the
load()
method that
you saw here.
