在输入框没有获取焦点之前,界面是这样的:
在输入框获取焦点之后,界面呈现是这样的:
其实只要用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; } });
本篇与上一篇一脉相承,在输入框获取焦点之前是这样的效果:
在输入框获取焦点之后是这样的效果:
有什么问题可以通过下面的回复框进行回复,我会第一时间回馈
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://www.phpxs.com/post/1776/
- 转载请注明:转载必须在正文中标注并保留原文链接
- 扫码: 扫上方二维码获取免费视频资料
查 看2022高级编程视频教程免费获取