更改頁面上不同區域的鏈接

Question

我要建立一個網站（全部在一頁上）。 它在頁面的頂部和底部都有箭頭。 我需要使用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>

Answer 1

首先短短東西..根據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

希望這可以幫助！

更改頁面上不同區域的鏈接

問題描述

1 個解決方案

解決方案1
0 已采納 2013-11-03 05:16:49

更改頁面上不同區域的鏈接

問題描述

1 個解決方案

解決方案1 0 已采納 2013-11-03 05:16:49

解決方案1
0 已采納 2013-11-03 05:16:49