本文目錄一覽：
JS分頁代碼?
script language=”javascript”
!–
function showPageLink(sUrl,iPage,iCount){
var i;
i=Math.max(1,iPage-1);
if(iPage==1){
document.write(“span style=’color:#7D7D7D’FONT face=Webdings9/FONT/span “);
document.write(“span style=’color:#7D7D7D’FONT face=Webdings7/FONT/span “);
}
else{
document.write(“a href=\”” + sUrl + “1\” title=’第 1 頁’FONT face=Webdings9/FONT/a “);
document.write(“a href=\”” + sUrl + i + “\” title=’上一頁(第 ” + i + ” 頁)’FONT face=Webdings7/FONT/a “);
}
if(iPage6) document.write(“span style=’font-size:8px’···/span “);
for(i=Math.max(1,iPage-5);iiPage;i++){
document.write(“a href=\””+sUrl + i + “\” title=’第 ” + i + ” 頁’b” + i + “/b/a “);
}
document.write(“font color=’#ff3333’b” + iPage + “/b/font “);
for(i=iPage+1;i=Math.min(iCount,iPage+5);i++){
document.write(“a href=\””+sUrl + i + “\” title=’第 ” + i + ” 頁’b” + i + “/b/a “);
}
i=Math.min(iCount,iPage+1);
if(iCountiPage+5) document.write(“span style=’font-size:8px’···/span “);
if(iPage==iCount){
document.write(“span style=’color:#7D7D7D’FONT face=Webdings8/FONT/span “);
document.write(“span style=’color:#7D7D7D’FONT face=Webdings:/FONT/span “);
}
else{
document.write(“a href=\”” + sUrl + i + “\” title=’下一頁(第 ” + i + ” 頁)’FONT face=Webdings8/FONT/a “);
document.write(“a href=\”” + sUrl + iCount + “\” title=’最後一頁(第 ” + iCount + ” 頁)’FONT face=Webdings:/FONT/a “);
}
}
showPageLink(“%=selfname%?page=”,%=page%,%=totalpage%);
//–
/script
其中selfname為該頁面的文件路徑
page為當前頁
totalpage為總頁數
javascript如何實現div分頁呢？
主要思路：就是點擊當前頁時，它自己顯示，其它的都隱藏；
下面是簡單的代碼實現：
style
input.active {background:yellow;}
div {width:200px; height:200px; border:1px solid red; display:none;}
div.active {display:block;}
/style
script
window.onload=function(){
var aBtn = document.getElementsByTagName(‘input’);
var aDiv = document.getElementsByTagName(‘div’);
for(var i =0; iaBtn.length;i++)
{
(function(index){ //因為要存儲點擊的下標，所以需要做一個參數引入。學名叫’自執行匿名函數’。
aBtn[i].onclick=function(){
//這個for循環的作用是將所以的都隱藏。
for(var i =0; iaBtn.length;i++)
{
aBtn[i].className=”;
aDiv[i].className=”;
}
//這是將當前點擊的顯示。
this.className=’active’;
aDiv[index].className=’active’;
};
})(i);
}
};
/script
/head
body
input type=”button” value=”111″ class=’active’ /
input type=”button” value=”222″ /
input type=”button” value=”333″ /
div class=”active”11111111111/div
div22222222222/div
div33333333333/div
/body
怎麼用js來實現頁面的分頁，有案列代碼嗎？請給個代碼看看，謝謝
分屏加載吧 滑到哪加載哪
從網頁頭引入兩個js文件，注意必須先放jquery的
[javascript] view plaincopy
script src=”css/infinite-scroll/jquery-1.6.4.js”/script
script src=”css/infinite-scroll/jquery.infinitescroll.js”/script
2.之後在網頁頭自己寫一個js腳本
[javascript] view plaincopy
script
$(document).ready(function (){
$(“#container”).infinitescroll({
navSelector: “#navigation”, //頁面分頁元素–本頁的導航，意思就是一個可以觸發ajax函數的模塊
nextSelector: “#navigation a”, //下一頁的導航
itemSelector: “.scroll ” , //此處我用了類選擇器，選擇的是你要加載的那一個塊（每次載入的數據放的地方）
animate: true, //加載時候時候需要動畫，默認是false
maxPage: 3, //最大的頁數，也就是滾動多少次停。這個頁碼必須得要你從數據庫裡面拿
});
});
/script
3.或許你看到這裡還是不太清楚網頁怎麼定義，這裡給出我的demo，希望可以有幫助
[html] view plaincopy
%@ page language=”java” contentType=”text/html; charset=utf-8″
pageEncoding=”utf-8″%
!DOCTYPE html
html
head
meta charset=”utf-8″
title無限翻頁效果/title
script src=”css/infinite-scroll/jquery-1.6.4.js”/script
script src=”css/infinite-scroll/jquery.infinitescroll.js”/script
script src=”css/infinite-scroll/test/debug.js”/script
script
$(document).ready(function (){ //別忘了加這句，除非你沒學Jquery
$(“#container”).infinitescroll({
navSelector: “#navigation”, //頁面分頁元素–成功後自動隱藏
nextSelector: “#navigation a”,
itemSelector: “.scroll ” ,
animate: true,
maxPage: 3,
});
});
/script
/head
body
div id=”container” !– 容器 —
div class=”scroll” !– 每次要加載數據的數據塊–
第一頁內容第一頁內容br
第一頁內容br第一頁內容br第一頁內容br
第一頁內容br第一頁內容br第一頁內容br
第一頁內容br第一頁內容br第一頁內容
/div
/div
div id=”navigation” align=”center” !– 頁面導航–
a href=”user/list?page=1″/a !– 此處可以是url，可以是action，要注意不是每種html都可以加，是跟當前網頁有相同布局的才可以。另外一個重要的地方是page參數，這個一定要加在這裡，它的作用是指出當前頁面頁碼，沒加載一次數據，page自動+1,我們可以從服務器用request拿到他然後進行後面的分頁處理。–
/div
/body
/html
原創文章，作者：HEGE，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/146682.html
微信掃一掃 
支付寶掃一掃 