특별한건 없다. 역시 jQuery는 간단하면서 기능 쵝오.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Css/cssJMBae.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.button
{
border-width: 1px; padding: 1px; margin: 1px; border-style: solid; text-align: center; width: 150px;
}
</style>
<script src="Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#letter-a .button').click(function () {
$('#dictionary').load('Page106Part1.htm');
$('#dictionary')
alert('Loaded!');
});
});
</script>
</head>
<body>
<h2>천사의 사전</h2>
<h4>앰브로스 비어스 지음</h4>
<div class="letters">
<div id="letter-a" class="letter">
<h3>A</h3>
<div class="button">
Load
</div>
</div>
<div id="letter-b" class="letter">
<h3>B</h3>
<div class="button">
Load
</div>
</div>
<div id="letter-c" class="letter">
<h3>C</h3>
<div class="button">
Load
</div>
</div>
<div id="letter-d" class="letter">
<h3>D</h3>
<div class="button">
Load
</div>
</div>
</div>
<div id="dictionary">
</div>
</body>
</html>
결과는 역시.. 직접 해보면.. ^^
p.s : cssJMBae.css 와 Page106Part1.htm 파일 첨부함.
cssJMBae.css
Page106Part1.htm