静态页分页效果

标签：class   java   javascript   html   cti   htm   

//分页
(function(){
var cur=1;
$(".newslist li").hide();
var size = $(".newslist li").length;
var page = Math.floor($(".newslist li").length/20)+1;
for(var i=1; i<=page; i++){
$(".page").append(‘<a href="javascript:;">‘+i+‘</a>‘);
}

//默认
$(".page").children("a").eq(0).addClass("cur");
if($(".page").children("a").eq(0).hasClass("cur")){
$(".newslist li:lt(20)").show();
}

//点击
$(".page a").click(function(){
var e=$(this).index();
$(this).addClass("cur").siblings("a").removeClass("cur");
$(".newslist li").hide();
$(".newslist li").slice(20 * e, 20 * e + 20).show();
window.location.href = "Media.shtml#" + e;
})

//点详情页后回去 之前的page;
if (window.location.href.indexOf("#") > 1) {
var pageIndex = window.location.href.slice(window.location.href.indexOf("#") + 1, window.location.href.length);
$(".newslist li").hide();
$(".newslist li").slice(20 * pageIndex, 20 * pageIndex + 20).show();
$(".page a").eq(pageIndex).addClass("cur").siblings("a").removeClass("cur");
}

})()

静态页分页效果,布布扣,bubuko.com

静态页分页效果

标签：class   java   javascript   html   cti   htm   

原文地址：http://www.cnblogs.com/aimyfly/p/3796901.html