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

クリック ハンドラーで新しい URL に移動するだけではどうですか。

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

私には、単一ページの Web アプリケーションを作成したいと考えているように見えます。そのためのフレームワークは、実際に使用する価値のあるものがたくさんあります。

実際の質問に答えるには、すべての要素を 1 ページにロードし、それらを非表示/非表示にすることができます。

$( 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 に答える