编程学习网 > WEB开发 > JavaScript开发 > js仿淘宝在分页导航中实现跳转到指定分页功能
2014
11-11

js仿淘宝在分页导航中实现跳转到指定分页功能

淘宝网搜索结果页分页导航右侧跳转到指定分页的效果是这样的:

在输入框没有获取焦点之前,界面是这样的:

效果1

在输入框获取焦点之后,界面呈现是这样的:

效果2

其实只要用js就可以实现这样的效果,代码如下:

$("#gotoBtn").hide();
$("#pageNumber").on("focus",function(){
    $("#gotoBtn").show();
    $("#gotoBtn").attr({'style':'margin-left:0px;'});
});
$("#gotoBtn").on("click",function(){
    var number = parseInt($("#pageNumber").val());
    var max = parseInt($("#maxCount").html());
    if(number>=1 && number<=max){
        var url = document.URL;
        var newurl = "";
        var arr1 = new Array();
        arr1 = url.split('?');
        if(arr1[1]){
            var arr2 = new Array();
            arr2 = arr1[1].split('&');
            if(!arr2[1]){
                newurl = url+'&page='+number;
            }else{
                var hasPage = false;
                for(var i=0;i<arr2.length;i++){
                    if(!arr2[i].indexOf('page')){
                       arr2[i] = 'page='+number;
                       hasPage = true;
                    }
                }
                var newparams = arr2.join('&');
                if(!hasPage){
                    newparams = newparams + '&page='+number;
                }
                newurl = arr1[0] + '?' + newparams; 
            }
        }else{
            newurl = url+"?page="+number;
        }
        location.href = newurl;       
    }else{
        alert('请输入正确页数!');
        return false;            
    }
});

本篇与上一篇一脉相承,在输入框获取焦点之前是这样的效果:

效果1

在输入框获取焦点之后是这样的效果:

效果2

有什么问题可以通过下面的回复框进行回复,我会第一时间回馈

扫码二维码 获取免费视频学习资料

Python编程学习

查 看2022高级编程视频教程免费获取