实现步骤:

1、创建对应切换div

<div class="bottom_daohang">
<div class="bottom_daohang_zong">
<div class="bottom_daohang_left value_left ace">&lt;</div>
<div id="bianse1" class="bottom_daohang_number ace red value_number" bs="1">1</div>
<div id="bianse2" class="bottom_daohang_number ace value_number" bs="2">2</div>
<div id="bianse3" class="bottom_daohang_number ace value_number" bs="3">3</div>
<div id="bianse4" class="bottom_daohang_number ace value_number" bs="4">4</div>
<div id="bianse5" class="bottom_daohang_number ace value_number" bs="5">5</div>
<div id="bianse6" class="bottom_daohang_number ace value_number" bs="6">6</div>
<div id="bianse7" class="bottom_daohang_number ace value_number" bs="7">7</div>
<div id="bianse8" class="bottom_daohang_number ace value_number" bs="8">8</div>
<div id="bianse9" class="bottom_daohang_number ace value_number" bs="9">9</div>
<div id="bianse10" class="bottom_daohang_number ace value_number" bs="10">10</div>
<div id="bianse11" class="bottom_daohang_number ace value_number" bs="11">11</div>
<div class="bottom_daohang_right value_right ace">&gt;</div>
</div>
</div>

关键:自定义属性“bs”,方便匹配

2、创建自定义class

/*第一模块追加CLASS*/
.red{
background: #A3EFE2!important;
}

使div能够对应切换颜色

3、实现对应div显示后,对应的下方导航div切换颜色

//下方导航栏第一模块显示隐藏
function addEvent_3(){
$(".value_number").click(function(){
var aaa=$(this).attr('bs');//追加自定义属性(属性值为数字方便获取对应id名称)
$(".value_zhu").css("display","none");//先将所有的div都隐藏
if(aaa == 0){
$("#zhuanhuan1").css("display","block");//让第一个div页面加载便显示出来
}else if(aaa != 0){
$("#zhuanhuan"+aaa).css("display","block");//字符串拼接获得相应id名称,从而相匹配
$(".value_number").removeClass('red');//移除掉所有自定义class名称
$("#bianse"+aaa).addClass('red');//添加自定义class名称,达到元素相匹配效果
}
})
}

4、实现上一页下一页跳转

上一页

//第一模块上一页
function addEvent_4(){
$(".value_left").click(function(){
var bbb=+$(".red").attr('bs');//得到获得class名称的元素的自定义属性值(数字)
var ccc=bbb-1;//获得上一元素的自定义属性值(数字)
$(".value_zhu").css("display","none");
if(bbb == 1){
$("#zhuanhuan1").css("display","block");//让第一个div显示
}else if(bbb > 1&& bbb <= 11){
$("#zhuanhuan"+ccc).css("display","block");//字符串拼接得到上一元素的id值让它显示
$(".value_number").removeClass('red');//移除所有自定义class值
$("#bianse"+ccc).addClass('red');//对应元素追加class
}
})
}

下一页

//第一模块下一页
function addEvent_5(){
$(".value_right").click(function(){
var ddd=+$(".red").attr('bs');
var eee=ddd+1;
$(".value_zhu").css("display","none");
if(ddd >= 1&& ddd <11){
$("#zhuanhuan"+eee).css("display","block");
$(".value_number").removeClass('red');
$("#bianse"+eee).addClass('red');
}else if(ddd == 11){
$("#zhuanhuan11").css("display","block");
}
})
}

关键:利用自定义的数字属性,字符串拼接找到对应的div,从而达到同步的效果

实现效果:

利用div显示隐藏实现的分页效果的更多相关文章

  1. WinForm实现类似QQ停靠,显示隐藏过程添加特效效果

    原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...

  2. 利用MVC模式简单设计jsp分页效果

    利用Mysql创建一个表Car 用Eclipse创建一个Dynamic Web Project 在lib目录下导入Mysql的jar包 创建如下文件 package com.bean; public ...

  3. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

  4. 单选,复选操作div,显示隐藏

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  6. 控制div显示隐藏(有文字图片介绍)

    <div class="toggle"> <p id="zi">收起</p> <p id="zhe" ...

  7. css div如何隐藏?

    在我们平时布局网站的时候,想要把div进行隐藏,但是很多人不知道css控制div显示隐藏?下面我们来讲解一下css如何让div隐藏. 1.使用display:none来隐藏div 我们可以使用disp ...

  8. 承载地图的div如果隐藏再显示,则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  9. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. RocketMQ入门到入土(二)事务消息&顺序消息

    接上一篇:RocketMQ入门到入土(一)新手也能看懂的原理和实战! 一.事务消息的由来 1.案例 引用官方的购物案例: 小明购买一个100元的东西,账户扣款100元的同时需要保证在下游的积分系统给小 ...

  2. [SCOI2016]背单词 题解

    背单词 https://www.luogu.com.cn/problem/P3294 前言: Trie树的省选题(瑟瑟发抖QAQ) 问题汇总:(请忽略) (1)对Trie字典树的运用不熟练 (2)没想 ...

  3. Nginx平滑升级详细步骤-113p.cn

    认识平滑升级 有时候我们需要对Nginx版本进行升级以满足运维人员对其功能的需求,例如添加xxx模块,需要xxx功能,而此时Nginx又在跑着业务无法停掉,这时我们就只能平滑升级了. 平滑升级原理 N ...

  4. Python3笔记003 - 1.3 python开发工具

    第1章 认识python 1.3 python开发工具 IDLE(python自带的python shell) Pycharm(python开发的,选择专业版) 1.进入IDLE模式: C:\Prog ...

  5. 每日一题 - 剑指 Offer 50. 第一个只出现一次的字符

    题目信息 时间: 2019-07-03 题目链接:Leetcode tag:哈希表 难易程度:简单 题目描述: 在字符串 s 中找出第一个只出现一次的字符.如果没有,返回一个单空格. s 只包含小写字 ...

  6. NuGet 应用指南

     一.前言 在产品开发过程中,一点有很多类库:这么多类库大家是如何管理的呢,TFS.SVN.Github……?在开发人员使用对应类库是否存在类库引用路径不一致.版本不一致问题.依赖类库版本不对应等一些 ...

  7. NIVIDIA Tegra K1 QWT安装使用问题和解决办法

    在Linux系统下,Tegra K1(ARM体系),只有QtCreator的环境下,去安装Qwt6.1.0: 下载: 系统安装好之后,直接联网在系统自带的软件安装程序中搜索Qt,安装Qt5.2.1,之 ...

  8. day04总结

    print("陈少最帅!!!") 输出结果: 陈少最帅!!! 可以变,不可变数据类型#1.可变类型:list,dict#在值改变的情况下,id号不变,也就是说内存地址不变,证明就是 ...

  9. 06 Vue生命周期钩子

    生命周期钩子 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数 钩子函数: 满足特点条件被回调的方法 new Vue({ el: "#app" ...

  10. python数据处理(七)之数据探索和分析

    1.探索数据 1.1 安装agate库 1.2 导入数据 1.3 探索表函数 a.排序 b.最值,均值 c.清除缺失值 d.过滤 e.百分比 1.4 连结多个数据集 a.捕捉异常 b.去重 c.缺失数 ...