0

我有一个网站，读起来像一本书，第一页到上一页的下一页。把它想象成一本书的前后翻页。它不是浏览器中的上一页，而是页面本身。就像你正在改变一本书的页面

我正在尝试为上一页和下一页按钮动态分配链接。当前页面位于以 pageNum 和 fileName 作为键的对象中

我正在尝试根据当前页面链接的页码设置上一个链接。请参阅下面的示例和代码。

var toc = [
    {"pageNum": "1", "fileName": "index.html"},
    {"pageNum": "2", "fileName": "about.html"},
    {"pageNum": "3", "fileName": "work.html"},
    {"pageNum": "4", "fileName": "blog.html"},
    {"pageNum": "5", "fileName": "contact.html"},
  ];
  
var url = window.location.pathname;
var currentPage = url.substring(url.lastIndexOf('/')+1);
  
var prevPageNum;
var prevPage;
  
//Based on currentPage, find object entry in toc and apply related pageNum
toc.filter(function(toc){
  if(toc.fileName == currentPage) {
    $('#currentPageNumber').append(toc.pageNum);
  }
});
  
  /******* Last and Next Page Assignment *******/

toc.filter(function(toc){
  if(toc.fileName == currentPage) {
    prevPageNum = toc.pageNum-1;
    prevPage = toc.fileName;
  
    $('#prevPage').append(prevPage);
    //final code
    //$('#prevPage').attr("href",prevPage);
  }
});
<a href="#" id="prevPage">Previous Page</a>
<a href="#" id="nextPage">Next Page</a>

例子：

currentPage 是about.html prevPage 需要是index.html

4

2 回答 2

0

对我来说，您似乎想要创建一个单页 Web 应用程序，并且有很多框架确实值得使用。

要回答实际问题，也许您可​​以在一页中加载所有元素，然后隐藏-取消隐藏它们。

$( document ).ready(function(){
	$(".content").css("display","none");
	var currentPage = 1;
        $("#block" + currentPage).css("display","block");
	$("#prev").click(function(){
		$(".content").css("display","none");
		currentPage--;
        if(currentPage == 0) currentPage = 2;
		$("#block" + currentPage).css("display","block");
	});
	$("#next").click(function(){
		$(".content").css("display","none");
		currentPage++;
        if(currentPage == 3) currentPage = 1;
		$("#block" + currentPage).css("display","block");
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href = "#" id = "prev"> Previus</a>
<a href = "#" id = "next"> Next</a>
<div id = "block1" class = "content">
This is home page
</div>
<div id = "block2" class = "content">
This is about page
</div>

于 2016-01-29T18:03:57.040 回答
0

在点击处理程序中导航到新网址怎么样：

$('#prevPage').click(function() {
    window.location.href = prevPage;
});
于 2016-01-29T16:51:41.233 回答