<!-- 檔案：0914-6a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>
<!-- 檔案：0914-6b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/0b0/FFF/?text=B">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html><!-- 檔案：0914-6c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/00c/FFF/?text=C">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>/*檔案：0914-6.css*/
a.current{
color: #a00;
}// 檔案：0914-6.js
$('a').click(function(e){
e.preventDefault();
var url = this.href;
$('a').removeClass('current');
$(this).addClass('current');
$('#container').remove();
$.ajax({
type:'GET',
url:url,
timeout:2000, //等待回應時間
beforeSend:function(xhr){
if (xhr.overrideMimeType) { // 若支援此特性
xhr.overrideMimeType("application/json"); // 設定MIME特性避免錯誤
}
$('#content').append('<div id="load">載入中....</div>');
},
complete:function(){
$('#load').remove();
},
success:function(data){
$('#content').html($(data).find('#container').hide().fadeIn());
},
error:function(){
('#content').html('<div id="container">請稍後再試一次</div>')
}
});
});
全站熱搜
留言列表
伺服器架設 (1)
