您的位置:首页技术文章
文章详情页

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

【字号: 日期:2022-06-23 17:31:13浏览:38作者:猪猪

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

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

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

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

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

其实只要用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;}});

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

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

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

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

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

标签: 淘宝
相关文章: