js仿淘寶在分頁(yè)導(dǎo)航中實(shí)現(xiàn)跳轉(zhuǎn)到指定分頁(yè)功能
淘寶網(wǎng)搜索結(jié)果頁(yè)分頁(yè)導(dǎo)航右側(cè)跳轉(zhuǎn)到指定分頁(yè)的效果是這樣的:
在輸入框沒(méi)有獲取焦點(diǎn)之前,界面是這樣的:
在輸入框獲取焦點(diǎn)之后,界面呈現(xiàn)是這樣的:
其實(shí)只要用js就可以實(shí)現(xiàn)這樣的效果,代碼如下:
$('#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(’請(qǐng)輸入正確頁(yè)數(shù)!’);return false;}});
本篇與上一篇一脈相承,在輸入框獲取焦點(diǎn)之前是這樣的效果:
在輸入框獲取焦點(diǎn)之后是這樣的效果:
有什么問(wèn)題可以通過(guò)下面的回復(fù)框進(jìn)行回復(fù),我會(huì)第一時(shí)間回饋
相關(guān)文章:
1. 支付寶怎么綁定營(yíng)業(yè)執(zhí)照?支付寶綁定營(yíng)業(yè)執(zhí)照的步驟2. qq錢(qián)包怎么向商家付款3. 拼多多怎么取消月卡自動(dòng)續(xù)費(fèi)4. 悟空保自動(dòng)扣費(fèi)怎么關(guān)閉5. iphone11怎么設(shè)置抖音動(dòng)態(tài)壁紙6. Word中將文檔加密后怎么解開(kāi)?Word中將文檔加密解開(kāi)方法7. 微信怎么打開(kāi)網(wǎng)址鏈接?微信搜索打開(kāi)網(wǎng)址鏈接的方法!8. 同一個(gè)手機(jī)號(hào)可以注冊(cè)兩個(gè)qq嗎9. 網(wǎng)易云狀態(tài)怎么設(shè)置10. 微信支付分名片是什么?微信支付分名片開(kāi)通方法介紹!
