最简单的 DIV + Javascript 分页演示代码

最新推荐文章于 2023-05-12 17:23:14 发布
最新推荐文章于 2023-05-12 17:23:14 发布
阅读量1.3k 收藏
点赞数
分类专栏： 带问号的 Web 技术相关 文章标签： javascript div testing function 任务 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DJ2008/article/details/2519820
版权
技术相关 同时被 3 个专栏收录
130 篇文章 1 订阅
订阅专栏
带问号的
112 篇文章 0 订阅
订阅专栏
Web
97 篇文章 0 订阅
订阅专栏

手中有一个改进Web Part 的任务，要求加一个分页，及对应前一页，后一页导航，以下为一个很简单的验证代码:

<html>
<body>
<head>
<script Language = 'JavaScript'>

var curPage =0; maxPage =4;
function selectedPageByID(inputId)
{
 var divs = document.getElementsByTagName('div');
 var divCounter = 1;
 var divcountlength = divs.length;
 for(var no = 0; no < divcountlength; no++)
 {
  if(divs[no].id == inputId)
  {
   divs[no].style.display = "block";
   curPage = no;
  }
  else
  {
   divs[no].style.display = "none";
  }
 }
}

function selectedPageByNo(pageNo)
{
 var divs = document.getElementsByTagName('div');
 var divCounter = 1;
 var divcountlength = divs.length;
 for(var no = 0; no < divcountlength; no++)
 {
  if(no == pageNo)
  {
   divs[no].style.display = "block";
   curPage = no;
   
  }
  else
  {
   divs[no].style.display = "none";
  }
 }
}

function getNextPage()
{
 curPage = parseInt(curPage)+1;
 if (curPage > maxPage) curPage = maxPage;
 selectedPageByNo(curPage);
}

function getPrePage()
{
 curPage = parseInt(curPage)-1;
 if (curPage < 0) curPage = 0;
 selectedPageByNo(curPage);
}

</script>
</head>
<a href='javascript:selectedPageByNo(0);'> |< </a>
<a href='javascript:getPrePage();'> < </a>
<a href='javascript:selectedPageByID("Page1");'> 1 </a>
<a href='javascript:selectedPageByID("Page2");'> 2 </a>
<a href='javascript:selectedPageByID("Page3");'> 3 </a>
<a href='javascript:selectedPageByID("Page4");'> 4 </a>
<a href='javascript:selectedPageByID("Page5");'> 5 </a>
<a href='javascript:getNextPage();'> > </a>
<a href='javascript:selectedPageByNo(4);'> >| </a>

<hr>

<div id ='Page1' style='display:none'>
Hello!<br>This is testing Page 1.
</div>
<div id = 'Page2' style='display:none'>
Hello!<br>This is testing Page 2.
</div>
<div id = 'Page3' style='display:none'>
Hello!<br>This is testing Page 3.
</div>
<div id = 'Page4' style='display:none'>
Hello!<br>This is testing Page 4.
</div>
<div id = 'Page5' style='display:none'>
Hello!<br>This is testing Page 5.
</div>

</body>
</html>

DJ2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端分页代码展示
weixin_49277956的博客
09-05 304
<%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%> <%@ taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core”%> <% pageContext.setAttribute(“APP_PATH”,request.getContextPath()); %> 分页
【学生网页设计作业源码】基于HTML+CSS+JavaScript简单的大学生书店(13个页面) 二手书店电子商务网站模板源码
QQ_____365392777的博客
08-09 505
🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习, 个别源码页面中没有使用js有需要的可以自行添加。🏅...
完整的分页显示的代码
06-10
代码包含用java写的完整的分页显示的代码。
“分页”显示代码
JavaAlliance
10-21 1090
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;%@taglib prefix="s" uri="/struts-tags"%&gt; &lt;script type="text/j
分页demo
qq_36566924的博客
09-23 374
1.引入page_common.css和page_common.js。文件见个人码云:https://gitee.com/morningworld/codes/kbufi7vqsxl461oj8med237 2.为分页分配一个区域，我这里用一个块放入这个分页块 <div class="page-get center"> <div id="pag...
div+js分页效果
11-26
div分页浏览，可上下浏览 div id命名为div+位置号，通 js函数通过要显示的div var eventSizez//总页数 var currentPosition = 0; //初始位置 //下一个正在办理事项办理情况 function next() { if(currentPosition 0){ $('#div'+currentPosition).hide(); currentPosition--; if(currentPosition <0){ currentPosition=eventSize-1; } $('#div'+currentPosition).show(); }else{ $('#div'+currentPosition).hide(); currentPosition=eventSize-1; $('#div'+currentPosition).show(); } } //初始化正在办理事项情况 function initPostion(position) { if(position==0){ $('#div0').show() return; } }
jQuery简单分页样式代码
05-01
本教程将深入讲解如何使用jQuery实现一个简单的分页样式代码，该代码基于`jquery-1.8.3.min.js`库构建，并且带有详细的中文注释，便于理解和定制。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
HTML网页设计
08-04 1517
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
分页效果代码
catherine的博客
08-07 346
调用方法： $(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }); pageCount：总页数 current：当前页     $(".tcdPageCode").createPage({         pageCo
div内容 分页 html代码（div 中的内容进行分页，模仿了书本形式）
01-23
可以对div 中的内容进行分页，模仿了书本形式，html代码
24种简单的div+css分页代码
12-13
这是一组简单的div+css分页代码。示例代码中共有24种不同风格的div+css分页示例。这些page分页代码简单，非常容易集成到项目中。
js分页显示div的内容
01-21
div分页显示_软件开发网_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden;
页面布局和自定义分页展示
01-10
用bootstrap框架搭建的页面布局,还有自定义的页面展示,要比分页插件的好看许多
分页div
LegendaryHsl的博客
03-01 502
&lt;!--分页 --&gt; &lt;div style="width: 380px; margin: 0 auto; margin-top: 50px;"&gt; &lt;ul class="pagination" style="text-align: center; margin-top: 10px;"&gt; &lt;li class="disabled"
js div 内容显示分页
a13732228279的博客
12-19 261
由于工作需要 　　div固定大小 而内容不定 所以 如果内容过多自然就显示不出来了 所以 需要分页一类的功能下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &...
js分页显示div内容
vip_linux的专栏
04-30 3338
js分页显示div内容的方法，对于div内容过高的情况，可以用js控制div分页，不错的分页效果。 例子，js分页显示div内容。         div分页显示_脚本之家_www.jb51.net    #frameContent{      width:500px;   /*调整显示区的宽*/      height:200px;  /*调整显示区的高*/   
js+div+css分页
客官里边请的博客
08-16 1054
js+div+css分页
js 分页功能实现
最新发布
m0_72759446的博客
05-12 970
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
ajax js ssm实现bootstrap视频分页
weixin_42726550的博客
08-27 532
      引入要用的js和css &lt;link rel="stylesheet" href="bootstrap.css" /&gt; &lt;script src="jquery-1.9.1.js"&gt;&lt;/script&gt; &lt;script src="bootstrap.js" /&gt;&lt;/script&g
JavaScript实现简单分页功能代码示例
"javascript实现简单的分页特效" 在网页开发中，分页是一种常见的功能，它用于将大量数据分成多个部分，让用户能够逐页浏览，提高用户体验。这里我们讨论的是如何使用JavaScript来实现一个简单的分页效果。这段代码...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值