var fenzu="fenzu_";
var zu = 1;
function nextFenzu(){
for(var i=1;i<=10;i++){
$("#fenzu_"+i).hide();
}
zu++;
if(zu>5){//最后一组了。
$("#fenzu_5").show();//直接写死最后一组吧！
zu = 5;
alert("提交");
}else{
fenzu = "fenzu_"+zu;
$("#"+fenzu).show();
}
return false;
}
function upFenzu(){
for(var i=1;i<=10;i++){
$("#fenzu_"+i).hide();
}
zu--;
if(zu<1){
$("#fenzu_1").show();
zu=1;
alert("已经是第一组了！");
}else{
fenzu = "fenzu_"+zu;
$("#"+fenzu).show();
}
return false;
}
function init(){
for(var i=2;i<=10;i++){
$("#fenzu_"+i).hide();
}
return false;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<BODY onload="init();">
<div id="fenzu_1" >
1组条数据
</div>
<div id="fenzu_2" >
2组条数据
</div>
<div id="fenzu_3" >
3组条数据
</div>
<div id="fenzu_4" >
4组条数据
</div>
<div id="fenzu_5" >
5组条数据
</div>
<span onclick="upFenzu();">上一组</span>
<span onclick="nextFenzu();">下一组</span>
</BODY>
分享到：
相关推荐
jQuery分页的基本思想是通过JavaScript动态加载或隐藏Table中的数据行，以实现分页显示。通常会结合后端接口获取数据，根据每页显示的数据量来划分页码，用户点击页码时，发送请求获取对应页的数据，并更新Table内容...
这可以通过CSS和JQuery的动画功能实现，通常在AJAX请求开始时显示，请求完成时隐藏。 6. **模型绑定**：ASP.NET MVC中的模型绑定负责将HTTP请求中的数据绑定到控制器动作的参数上，简化了数据接收的过程。在登录...
7. **插件使用**：有时候，开发者会选择使用现成的jQuery分页插件，如Slick、Swipe等，这些插件已经封装好了大部分逻辑，只需根据文档配置即可快速实现分页滑动效果。 8. **性能优化**：为了保证用户流畅的滑动体验...
这种分页方式通常指的是当页面的页码过多时，不将所有的页码都显示出来，而是通过省略号（...）来隐藏中间的部分页码，只显示首尾以及当前页附近的页码。这样可以避免页面显得过于拥挤，同时也能让用户快速定位到...
然而，无刷新分页通过Ajax技术实现了页面内容的动态更新，用户在浏览不同页码时，页面其他部分保持不变，仅数据区域更新，提高了交互速度和用户体验。 jQuery中的Ajax方法（如$.ajax或$.get、$.post）是实现无刷新...
本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能。 首先，理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。...
本文将详细介绍如何在jQuery EasyUI中实现分页功能，并解决在实际应用过程中可能遇到的一些常见问题。 #### 二、HTML结构 首先，我们需要了解HTML结构是如何搭建的。从提供的代码片段来看，主要包含了以下几个部分...
7. **分页算法**：在服务器端，需要实现分页算法，根据请求的页码和每页数量，计算出对应的记录范围，返回相应数据。 8. **安全性考虑**：防止用户直接修改URL中的页码参数，导致非法访问。服务器端应进行验证，...
"jquery带分页数字左右按钮控制单排图片切换"是一个使用jQuery库实现的特定功能，它结合了分页和导航按钮，使得用户可以通过点击数字分页或左右箭头来浏览一排图片。这个功能对于产品展示、图片画廊或任何需要滚动...
7. **用户交互**：为了提升用户体验，插件可能还包括其他特性，如禁用无数据的分页链接、提供跳转至第一页和最后一页的选项、显示或隐藏加载指示器等。 在`jiaoben3942`这个文件中，可能包含了实现这些功能的...
这里主要涉及到对图片的隐藏/显示控制，以及分页指示器的状态管理。 4. **事件绑定**：为分页指示器的每个元素绑定点击事件，当用户点击某个分页时，对应的图片将会被显示，同时更新当前选中的分页指示器状态。 5....
"jquery打印HTML表格自动分页"这个主题是关于如何利用jQuery来实现在用户打印HTML表格时自动进行分页的功能，这样可以确保长表格在打印时不被裁剪，而是以多页的形式呈现。 首先，要实现这一功能，我们需要理解HTML...
标题“jquery animated左右模块滑动切换分页显示代码”揭示了我们要讨论的关键技术点：使用jQuery实现的动画效果，以及在页面之间或模块之间的滑动切换。这种效果常见于内容丰富的网站，如电商、新闻门户或产品展示...
为了实现分页按钮的样式和动画效果，jQuery通常会与CSS（层叠样式表）和HTML（超文本标记语言）配合使用。CSS可以定义按钮的外观，包括颜色、大小、边框等，而HTML则负责结构化内容。jQuery可以修改元素的CSS属性，...
在jQuery中实现分页可能包括以下几个步骤： 1. **计算总页数**：根据数据量（例如，每页显示的项目数）计算出总页数。 2. **创建分页导航**：创建一个包含页码链接的HTML结构，可以是简单的数字列表或带有“上一页...
在这个场景中，"jQuery可控制内容数量的分页代码"指的是使用jQuery实现的动态分页功能，允许开发者根据需要显示的内容数量来调整分页行为。 在创建分页功能时，主要涉及以下几个关键知识点： 1. **DOM操作**：...
在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件...通过查看和学习这个代码，开发者可以了解到如何利用jQuery实现分页功能，这对网页开发尤其有用，尤其是处理动态内容和大型数据集时。
"jQuery Animated滑动切换分页显示代码"正是这样一种技术实现，它通过jQuery库的力量，为网页的分页展示增添了动态、流畅的动画效果，使用户在浏览信息时获得更佳的视觉享受。本文将深入探讨这一代码的工作原理、...
本资源"jQuery实现的无刷新分页动画切换效果源码.zip"显然提供了一个使用jQuery创建的分页系统，该系统在用户切换页面时能展示平滑的动画过渡，无需加载整个页面，极大地提升了用户体验。 首先，我们要理解无刷新...
这些文件包括了分页样式表（jpage.css）和jQuery库，它们是实现分页效果的基础。 接下来，我们需要编写JavaScript代码来处理分页逻辑。这里的关键代码包括初始化分页状态、绑定数据、以及处理分页按钮的点击事件： ...