更改不同地區的鏈接

我想製作一個網站（全部在一個頁面上）。它在頁面的頂部和底部有箭頭。我需要使用position:fixed，以便箭頭可以保持在同一位置（我正在使用Smooth Scroll插件）。我希望箭頭將鏈接更改爲上一篇文章（頁面頂部的∧鏈接）和相對於當前文章的下一篇文章（頁面底部的∨鏈接）（鏈接轉到文章使用#articlename）更改不同地區的鏈接

我現在已經是

<body> 
<a href="#h"><div id="ntop">&and;</div></a> 
<a href="#a"><div id="nbot">&or;</div></a> 

<div id="page"><div id="h"></div><div id="section"> 
<h1>Welcome to Localhost.</h1> 
<p>Localhost is a site. On your computer!</p> 
</div> 
<div id="a"></div><div id="section"> 
<h1>About Us.</h1> 
<p>We are a group that make websites.</p> 
</div> 
</div> 
</body>

來源

2013-10-14 Zoweb

快速添加代碼，否則我的朋友會嚴重發火。 –

@RohanSood我已經添加了Body的代碼，其他代碼只是指向平滑滾動（不起作用）的鏈接，Parallax Scrolling插件（它也不起作用）和我的風格。 – Zoweb

那麼你的問題是什麼？ –

首先短短東西..根據HTML規範的代碼，你不能把div的a內..嘗試圍繞翻轉他們，或將a標記的CSS display設置爲block。另外，你不能在多個元素上使用相同的ID（對於你的section ID，我建議使用一個類）。

對於您的每一個不同的「頁面」，用這樣的代碼：

<div class="page" id="page-PAGENUMBER"> 
    <!-- your page's code here --> 
</div>

凡PAGENUMBER是一個獨特的遞增數字，從0開始的第一頁。

更改您的兩個鏈接，看起來像這樣：

<a id="ntop" href="javascript:void(0);" style="display:block;">&and;</a> 
<a id="nbot" href="javascript:void(0);" style="display:block;">&or;</a>

使用這些變化，您可以更新當前的代碼看起來像這樣：

<body> 
<a id="ntop" href="javascript:void(0);" style="display:block;">&and;</a> 
<a id="nbot" href="javascript:void(0);" style="display:block;">&or;</a> 

<div class="page" id="page-0"> 
    <h1>Welcome to Localhost.</h1> 
    <p>Localhost is a site. On your computer!</p> 
</div> 
<div class="page" id="page-1"> 
    <h1>About Us.</h1> 
    <p>We are a group that make websites.</p> 
</div> 
</body>

，然後添加一些JavaScript代碼添加到您像這樣的頁面：

<script> 
    // Stores the current page 
    var current_page = 0; 

    // On previous page click 
    $("#ntop").click(function() { 
     current_page--; // Decrement current page 
     document.location.hash = "page-" + current_page; // Update URL hash 
    }); 

    // On next page click 
    $("#nbot").click(function() { 
     current_page++; // Increment current page 
     document.location.hash = "page-" + current_page; // Update URL hash 
    }); 
</script>

此代碼假定您使用jQuery

希望這會有所幫助！

來源

2013-11-03 05:16:49 cpdt

更改不同地區的鏈接

回答

相關問題