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

Posted ace-suiyuan008

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用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,从而达到同步的效果

实现效果:

技术分享图片

技术分享图片

 



以上是关于利用div显示隐藏实现的分页效果的主要内容,如果未能解决你的问题,请参考以下文章

VUE项目实战24分页效果实现

bootstrap 分页插件跳转到多少页如何写

如何在 Codeigniter 的分页类中隐藏页面链接?

隐藏数据表中的分页不删除

使用BootStrap的table表格,如何利用BootStrap的分页插件Paginator实现表格的分页

如何禁用和隐藏反应表的分页页脚?