<html>
<head>
<title>主頁</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<body>
<div style="width: 100%; height: 50px; line-height: 50px; border: 1px solid #ccc;">
<input type="button" value="首頁" onclick="HomePage()">
<input type="button" value="上一頁" onclick="PrePage()">
<input type="button" value="下一頁" onclick="NextPage()">
</div>
<div id="menu">
<ul style="display: inline;">
<li class="menu-item">
<a id="page1" href="#" onclick="select()">1.html</a>
<a id="page2" href="#" onclick="select()">2.html</a>
<a id="page3" href="#" onclick="select()">3.html</a>
</li>
</ul>
</div>
<div id="page" style="width: 100%; border: 1px solid #ccc;">
<iframe id="content" src=""></iframe>
</div>
</body>
<script>
var currentPage = {pageId: 'page0',pageUrl: 'index.html',pageIndex: 0};
var pageList = [
{pageId: 'page0',pageUrl: 'index.html',pageIndex: 0},
{pageId: 'page1',pageUrl: '1.html',pageIndex: 1},
{pageId: 'page2',pageUrl: '2.html',pageIndex: 2},
{pageId: 'page3',pageUrl: '3.html',pageIndex: 3},
{pageId: 'page4',pageUrl: '4.html',pageIndex: 4},
{pageId: 'page5',pageUrl: '5.html',pageIndex: 5},
];
function HomePage(){
$('#menu').show();
$('#page').hide();
currentPage = {pageId: 'page0',pageUrl: 'index.html',pageIndex: 0};
}
function PrePage(){
var currentPageIndex = currentPage.pageIndex;
if(currentPageIndex <= 1){
$('#content').attr('src', 'index.html');
$('#menu').show();
$('#page').hide();
}else{
pageList.forEach(function(item){
if(item.pageIndex == currentPageIndex - 1){
$('#content').attr('src', item.pageUrl);
currentPage = item;
return;
}
});
$('#menu').hide();
$('#page').show();
}
}
function NextPage(){
$('#menu').hide();
$('#page').show();
var currentPageIndex = currentPage.pageIndex;
pageList.forEach(function(item){
if(item.pageIndex == currentPageIndex + 1){
$('#content').attr('src', item.pageUrl);
currentPage = item;
return;
}
});
}
function select(){
$('#menu').hide();
$('#page').show();
var target = event.target || event.srcElement;
pageList.forEach(function(item){
if(item.pageId == target.id){
$('#content').attr('src', item.pageUrl);
return;
}
});
}
</script>
</html>