利用div显示隐藏实现的分页效果
实现步骤:
1、创建对应切换div
<div class="bottom_daohang">
<div class="bottom_daohang_zong">
<div class="bottom_daohang_left value_left ace"><</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">></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显示隐藏实现的分页效果的更多相关文章
- WinForm实现类似QQ停靠,显示隐藏过程添加特效效果
原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右 ...
- 利用MVC模式简单设计jsp分页效果
利用Mysql创建一个表Car 用Eclipse创建一个Dynamic Web Project 在lib目录下导入Mysql的jar包 创建如下文件 package com.bean; public ...
- js 控制div 显示隐藏的问题
var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...
- 单选,复选操作div,显示隐藏
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分
问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...
- 控制div显示隐藏(有文字图片介绍)
<div class="toggle"> <p id="zi">收起</p> <p id="zhe" ...
- css div如何隐藏?
在我们平时布局网站的时候,想要把div进行隐藏,但是很多人不知道css控制div显示隐藏?下面我们来讲解一下css如何让div隐藏. 1.使用display:none来隐藏div 我们可以使用disp ...
- 承载地图的div如果隐藏再显示,则定位时会定位到页面左上角
承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- RocketMQ入门到入土(二)事务消息&顺序消息
接上一篇:RocketMQ入门到入土(一)新手也能看懂的原理和实战! 一.事务消息的由来 1.案例 引用官方的购物案例: 小明购买一个100元的东西,账户扣款100元的同时需要保证在下游的积分系统给小 ...
- [SCOI2016]背单词 题解
背单词 https://www.luogu.com.cn/problem/P3294 前言: Trie树的省选题(瑟瑟发抖QAQ) 问题汇总:(请忽略) (1)对Trie字典树的运用不熟练 (2)没想 ...
- Nginx平滑升级详细步骤-113p.cn
认识平滑升级 有时候我们需要对Nginx版本进行升级以满足运维人员对其功能的需求,例如添加xxx模块,需要xxx功能,而此时Nginx又在跑着业务无法停掉,这时我们就只能平滑升级了. 平滑升级原理 N ...
- Python3笔记003 - 1.3 python开发工具
第1章 认识python 1.3 python开发工具 IDLE(python自带的python shell) Pycharm(python开发的,选择专业版) 1.进入IDLE模式: C:\Prog ...
- 每日一题 - 剑指 Offer 50. 第一个只出现一次的字符
题目信息 时间: 2019-07-03 题目链接:Leetcode tag:哈希表 难易程度:简单 题目描述: 在字符串 s 中找出第一个只出现一次的字符.如果没有,返回一个单空格. s 只包含小写字 ...
- NuGet 应用指南
一.前言 在产品开发过程中,一点有很多类库:这么多类库大家是如何管理的呢,TFS.SVN.Github……?在开发人员使用对应类库是否存在类库引用路径不一致.版本不一致问题.依赖类库版本不对应等一些 ...
- NIVIDIA Tegra K1 QWT安装使用问题和解决办法
在Linux系统下,Tegra K1(ARM体系),只有QtCreator的环境下,去安装Qwt6.1.0: 下载: 系统安装好之后,直接联网在系统自带的软件安装程序中搜索Qt,安装Qt5.2.1,之 ...
- day04总结
print("陈少最帅!!!") 输出结果: 陈少最帅!!! 可以变,不可变数据类型#1.可变类型:list,dict#在值改变的情况下,id号不变,也就是说内存地址不变,证明就是 ...
- 06 Vue生命周期钩子
生命周期钩子 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数 钩子函数: 满足特点条件被回调的方法 new Vue({ el: "#app" ...
- python数据处理(七)之数据探索和分析
1.探索数据 1.1 安装agate库 1.2 导入数据 1.3 探索表函数 a.排序 b.最值,均值 c.清除缺失值 d.过滤 e.百分比 1.4 连结多个数据集 a.捕捉异常 b.去重 c.缺失数 ...