利用div显示隐藏实现的分页效果

实现步骤:

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,从而达到同步的效果

实现效果:

原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9280301.html

时间: 2024-11-10 14:45:16

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

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

原文:WinForm实现类似QQ停靠,显示隐藏过程添加特效效果 这可能是个老题长谈的问题了,只是在项目中会用到这个效果,所以今天做个记录.大家见了别喷我.在项目中的需求是这样的. 打开程序,在屏幕的右下角会显示一个窗体,一般情况下该窗体会隐藏停靠在右边,只露出很小部分,当鼠标移动到这个很小部分时,窗体全部显示,显示过程是从右边滑动到左边,当鼠标离开窗体时,窗体需要隐藏在右边,只露出很小部分,隐藏过程是从左边滑动到右边. 实现此类效果我碰到的连个难点是:1.如何判断鼠标离开了窗体?2.窗体显示隐藏

原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱

功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱: 实现: 保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了. 一.方式1:隐藏后仍占有页面空间,显示空白 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;"document.getElementById("typediv1").styl

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

<div class="toggle"> <p id="zi">收起</p> <p id="zhe"><img src="images/up.png" width="20"/></p> </div> $(function() { $('.toggle').click(function() { $('.headerwrap')

Ajax实现phpcms列表分页效果

phpcms列表页ajax分页效果: 1.在  /phpcms/modules/模块下加多一个ajaxlist文件夹,在其文件夹下新建一个index.php,内容如下: <?php defined('IN_PHPCMS') or exit('No permission resources.'); //模型缓存路径 define('CACHE_MODEL_PATH',CACHE_PATH.'caches_model'.DIRECTORY_SEPARATOR.'caches_data'.DIRECT

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi

JavaScript基础 显示/隐藏效果 点击图片,DIV显示,图片更换,点击更换后的图片,DIV隐藏

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

[ jquery 效果 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) ] 此方法用于显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type=&#39;hidden&#39; 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)

show()显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type='hidden' 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素): hide() 方法隐藏被选元素: 参数 描述 speed 可选.规定显示效果的速度. 可能的值: 毫秒 "slow" "fast" easing 可选.规定在动画的不同点上元素的速度.默认值为 "swing". 可能的值: &

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

jquery之超简单的div显示和隐藏特效demo

闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/