2024-05-04 05:58

文章标签 web 一页

本文主要是介绍WEB 上一页下一页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<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="首页" οnclick="HomePage()">
<input type="button" value="上一页" οnclick="PrePage()">
<input type="button" value="下一页" οnclick="NextPage()">
</div>
<div id="menu">
<ul style="display: inline;">
<li class="menu-item">
<a id="page1" href="#" οnclick="select()">1.html</a>
<a id="page2" href="#" οnclick="select()">2.html</a>
<a id="page3" href="#" οnclick="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 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;
}
});
}