zoukankan      html  css  js  c++  java
  • 静态页分页效果

    //分页
    (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");
    }



    })()

  • 相关阅读:
    03- CSS进阶
    03-requests使用
    04-scrapy简介
    05-scrapy基本使用
    06-CrawlSpider模板
    07-Request、Response
    03-inotify+rsync sersync lsyncd实时同步服务
    markdown中折叠代码
    02-java基础语法
    01-java简介及环境配置
  • 原文地址:https://www.cnblogs.com/aimyfly/p/3796901.html
Copyright © 2011-2022 走看看