静态页面分页，如何正确显示相应的detail
Posted tangbuluo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态页面分页，如何正确显示相应的detail相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>网贷课堂-</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="${ctx}/images/favicon.ico" mce_href="${ctx}/images/favicon.ico" type="${ctx }/image/x-icon"> <link rel="shortcut icon" href="${ctx}/images/favicon.ico" mce_href="${ctx}/images/favicon.ico" type="${ctx }/image/x-icon"> <link rel="stylesheet" href="${ctx}/style/main.css" type="text/css" /> <link rel="stylesheet" href="${ctx}/style/classRoom.css" type="text/css" /> <link rel="stylesheet" href="${ctx }/style/font-awesome.css" /> <meta http-equiv="pragma" content="no-cache"> <meta property="wb:webmaster" content="53866932a7f4b2dc" /> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <style> #iframe::-webkit-scrollbar { width: 0; height: 0; } </style> </head> <body class="body_class"> <!--头部信息 开始--> <%@ include file="/WEB-INF/views/head/head.jsp"%> <!--头部信息 结束--> <div class="class_con"> <div class="menu-adress"> 网贷课堂 > 金融政策法规 > 查看内容 </div> <div id="iframe-wrap"> <iframe id="iframe" src="/f/classRoom/laws1" frameborder="0" width="100%"></iframe> </div> <ul id="sourse-con"> <li id="pre-page"><a href="javascript:;">上一篇: <span>关于促进互联网金融健康发展的指导意见</span></a></li> <li id="next-page"><a href="javascript:;">下一篇: <span>国务院关于积极推进“互联网+”行动的指导意见</span></a></li> </ul> </div> <!--脚部信息 开始o--> <%@ include file="/WEB-INF/views/tail/tail.jsp"%> <!--脚部信息 结束--> <script> $(document).ready(function(){ function fixHeight() { var headHeight = $(".txt-con").height(); // console.log(conHeight); $("#iframe").attr("height", $(window).height()-254+ "px"); } $(window).resize(function () { fixHeight(); }).resize(); var menulist= { ‘laws1‘: ‘关于促进互联网金融健康发展的指导意见‘, ‘laws2‘: ‘国务院关于积极推进“互联网+”行动的指导意见‘, ‘laws3‘: ‘网络借贷信息中介机构业务活动管理暂行办法‘, ‘laws4‘: ‘最高人民法院关于审理民间借贷案件适用法律若干问题的规定‘, ‘laws5‘: ‘《关于印发推进普惠金融发展规划（2016-2020年）的通知》‘, ‘laws6‘: ‘北京市海淀区人民政府关于促进互联网金融创新发展的意见‘, ‘laws7‘: ‘关于印发《关于支持中关村互联网金融产业发展的若干措施》‘, ‘laws8‘: ‘《关于加强校园不良网络借贷风险防范和教育引导工作的通知》‘, ‘laws9‘: ‘《关于清理“首付贷”类业务的通知》‘, ‘loan1‘: ‘网贷十年的曲线成长‘, ‘loan2‘: ‘网贷渗透率正逐步提升‘, ‘loan3‘: ‘互联网金融迎上市潮 P2P行业前景可观‘ } var html = ‘‘, firstList = [‘laws1‘,‘loan1‘], lastList = [‘laws9‘,‘loan3‘]; var urlParam=window.location.hash; var sVal = urlParam.substring(urlParam.lastIndexOf(‘#‘)+1, urlParam.length); console.log(sVal); $(‘#iframe‘).attr(‘src‘,‘/f/classRoom/‘+sVal); if(!urlParam){ $(‘#iframe‘).attr(‘src‘,‘/f/classRoom/laws1‘); window.location.href=‘/f/classRoom/class_detail#laws1‘; sVal = ‘laws1‘; } var match = ‘‘; var pageName = ‘‘, pageNum = ‘‘; function pageChange(){ // sVal = urlParam.substring(urlParam.lastIndexOf(‘#‘)+1, urlParam.length) match=sVal.match(/([^d]+)(d+)/); if(!match) return; if(match[1] == ‘laws‘){ $(‘.menu-adress‘).html(‘<a href="/f/classRoom/index">网贷课堂</a> > <a href="/f/classRoom/index">金融政策法规</a> > 查看内容‘); }else{ $(‘.menu-adress‘).html(‘<a href="/f/classRoom/index">网贷课堂</a> > <a href="/f/classRoom/index?id=2">网贷行业动态</a> > 查看内容‘); } pageName = match[1]; pageNum = parseInt(match[2]); if(lastList.indexOf(sVal) > -1){ html=‘<li id="pre-page"><a href="javascript:;">上一篇: <span>‘+menulist[pageName+(pageNum-1)]+‘</span></a></li>‘; }else if(firstList.indexOf(sVal) > -1){ html=‘<li id="next-page"><a href="javascript:;">下一篇: <span>‘+menulist[pageName+(pageNum+1)]+‘</span></a></li>‘; }else{ html=‘<li id="pre-page"><a href="javascript:;">上一篇: <span>‘+menulist[pageName+(pageNum-1)]+‘</span></a></li>‘+ ‘<li id="next-page"><a href="javascript:;">下一篇: <span>‘+menulist[pageName+(pageNum+1)]+‘</span></a></li>‘; } $(‘#sourse-con‘).html(html); } pageChange(); $(‘#sourse-con‘).on(‘click‘,‘#next-page‘,function(){ sVal = pageName+(pageNum+1); window.location.href=‘/f/classRoom/class_detail#‘+sVal; $(‘#iframe‘).attr(‘src‘,‘/f/classRoom/‘+sVal); pageChange() }) $(‘#sourse-con‘).on(‘click‘,‘#pre-page‘,function(){ sVal = pageName+(pageNum-1); window.location.href=‘/f/classRoom/class_detail#‘+sVal; $(‘#iframe‘).attr(‘src‘,‘/f/classRoom/‘+sVal); pageChange(); }) // $(‘#iframe‘).on(‘load‘,function(){ // var txt = $(‘#address-bar‘).html(); // console.log(txt) //// $(‘.menu-adress‘).html(txt); // }) }) </script> </body> </html>
以上是关于静态页面分页，如何正确显示相应的detail的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Material UI 表格分页在每页显示正确的行