WEB 上一页下一页

最新推荐文章于 2022-09-14 17:26:02 发布
最新推荐文章于 2022-09-14 17:26:02 发布
阅读量4.4w 收藏 1
点赞数
分类专栏： js 文章标签： WEB 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010031813/article/details/85641408
版权

<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 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>

半吊子的程序狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面js返回上一步上一页
05-16
改文档包含各种“返回”的实现方式。如：jS后退一页, JS返回上一页代码, JS返回下一页,JS返回第几页,JS页面跳转, JS引用JS
JavaWeb基础分页（一看就会）
FanZaiYo的博客
03-18 4763
首先我们要理清楚分页我们都需要哪些数据，是否需要工作类 public class Page<T> { // 当前页码 private int pageIndex; // 每页数据量 private int pageSize = 5; // 总页数 private int pageCount; // 总数据量 private int total; // 当前页数据 private List<T> results; } 理清我们所有的数据之后，就要
Web前端
NFY0424的博客
09-14 1077
web笔记
JavaWeb：（九）分页
sd_960614的博客
06-28 137
分页操作相关代码
javaweb(ajax实现分页)
qq_64200256的博客
03-28 1756
首先我们要用三层架构搭建一个底层然后在jsp上写上下面的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <
Elementui自定义Pagination 上一页下一页使用按钮
sunnyboysix的博客
12-07 8821
一 效果图 二 上代码 <el-button size="small" @click="pervious">上一页</el-button> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current" :page-size="pageSize"
前端实现分页
qq_45136544的博客
04-23 8238
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
Web 上一页下一页 用超链接 用按钮
dianyi7318的博客
08-18 1382
方法一超链接 Default.aspx.cs html代码************************************************************************************* <%@ Page Language="C#" AutoEventWireup="true...
html超出高度自动下一页,上滑web页面自动加载下一页
weixin_36318306的博客
05-31 1165
移动端常常是通过向上滑动到页面底部自动加载下一页内容，而不是点击“下一页”按钮进行加载。这是一个演示了自动加载下一页的小demo。html:html>向上滑动自动加载后续页面js:varpage_example={pageNo:1,init:function(){for(vari=0;ivarhtml=''+''+'第1页項目'+i+''+''+'內...
通用代码下一页
10-21
导入页面 例如： <s:include value="../Struts2GotoPage.jsp"></s:include> <s:iterator value="goods" id="item" status="st"> <tr align="center"> <td >${st.index+1} </td> <td >${item.gsName }</td> <td >${item.gsClass }</td> <td >${item.gsBrand }</td> <td >${item.placeOrigin }</td> <td >${item.gsWeight }</td> <td >${item.unitPrice }</td> <td > <button 购买</button> </td> </tr> </s:iterator>
js实现上一页下一页的效果【附代码】
10-22
下面小编就为大家带来一篇js实现上一页下一页的效果【附代码】。小编觉得非常不错。现在分享给大家。希望能给大家一个参考。
实现“上一页”和“下一页按钮
12-17
<?php  //本例子摘自phpbuilder.com  //稍加翻译  //<sprming>  $limit=20; // 每页显示的行数  $numresults=mysql_query("select * from TABLE where YOUR CONDITIONAL HERE order by WHATEVER");//换成你所需要的sql语句  $numrows=mysql_num_rows($numresults);  // next determine if offset has been passed to script, if not use
分页栏的web标准实现
01-19
分页栏是网页上最常见不过的一个组件，本博文给出分页栏的一个web2.0标准示例，并作简要分析。本分页栏的界面效果如下图所示： 本分页栏组件具有以下特性： 1、不论当前页码是哪一个，分页栏始终显示第一页的页码和...
cassandra-web:cassandra web ui
05-09
卡桑德拉网演示版特征主题黑暗表格行上一页下一页表格行编辑表格行过滤器表格行删除表名查找表定义表导出表导入CQL查询支持的Cassandra版本2.1.x 2.2.x 3.xx 是的是的是的用法下载$ wget ...tar zxvf linux.tar.gznpm...
Java WEB实现URL重写
05-22
URL重写，其实就是把带一大堆参数的url，变成一个看上去很规矩的url。本例是URL重写的Java WEB实现。
web结课作业，需要自取，取后评论区留言，避免撞车。
06-14
实现的内容：第一页有板块浮动至顶部固定，属于js加分项，右侧超链接可以跳转至下一页至于块模型什么的，可自行研究，第二个页面右侧是一个二级菜单，颜色什么的也可自行改变，下方链接跳转第三个页面，是一个答题...
js實時取Session值問題
u010031813的博客
10-24 394
想在頁面做一個頁面實時獲取session判斷是否過期的問題，最終的結果是console.log()一直存在session值記錄。 問了下資深同事， "<% =Session["UserID"] %>"這種寫法只是在頁面第一次加載時產生，後續一直不會變。 window.onload = setInterval(sessionOut, 1000); function se...
第一列和第二行交叉复选框 示例
u010031813的博客
08-25 141
第一列和第二行交叉复选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=<1.0>"> <meta http-equiv="X-UA-Compatible" content="i...
asp.net web中datagridview上一页、下一页代码
最新发布
05-18
如果您使用的是ASP.NET Web Forms，那么您可以在前端使用DataPager控件来实现分页。...当用户单击DataPager中的上一页或下一页按钮时，GridView自动重新绑定数据并显示新的页码。您不需要编写任何其他代码来处理分页。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值