HTML-鏈接到打開的頁面，然后在該頁面上定位

Question

我正在一個相當廣泛的本地網站上工作。 它不在Web服務器上，我或多或少地局限於HTML和JavaScript。

我在用此語句調用的所有頁面上都有一個側面導航菜單：

<script type="text/javascript" src="menu/menu.js"></script>

menu.js本質上是這樣的鏈接列表：

document.write("<a href='page5.html#part1'>Part 1</a>");

在所有頁面上都有一個粘滯的標題腳本，該腳本使鏈接到錨點變得麻煩。 如果您當前在頁面上，鏈接正在鏈接，並且鏈接已鏈接到錨點上方，則可以正常工作。 但是，如果您當前位於同一頁面的錨點之下，則它會出現故障。 它不會帶您去應該去的地方。

可能還有另一種方法，但是我覺得一個易於實現的解決方案是創建一個鏈接，該鏈接首先在頂部打開頁面，然后將您帶到錨點。

我嘗試從這個問題中使用@Qwerty的解決方案（[ 用html錨點（＃）-HTML＆JS強制重新加載頁面），但是沒有用。 我嘗試了這個：

document.write("<a href='page5.html#part1' onclick='location.reload()'>Part 1</a>");

我猜因為它是本地的和/或因為從JS文件讀取鏈接，所以它不起作用。

示例為了簡單起見，假設站點上有3個頁面，每個頁面上都有3個錨點。 我希望此外部JS菜單打開並在所有頁面上都能工作。 它具有以下鏈接：

page1.html#part1
page1.html#part2
page1.html#part3

page2.html#part1
page2.html#part2
page2.html#part3

page3.html#part1
page3.html#part2
page3.html#part3

Answer 1

這可能與您的問題毫無關系，也可能給您一個想法，如何更好地構建您的應用程序。 為了滿足您的導航需求，您不需要Javascript。 但是您可以將其添加到組合中，以使用不錯的頭來改進此解決方案。

 <html> <head> <title>one-page-app</title> <style> .pages { display: none; } .pages:target { display: block; } </style> </head> <body> <nav> <p>Main Menu:</p> <a href="#home">Home</a> <a href="#faq">FAQ</a> <a href="#external">External content (other file)</a> </nav> <a name="home"></a> <div id="home" class="pages"> <h1>Home</h1> <p>Hi. Check <a href="#faq">FAQ</a> to see how it's working.</p> </div> <a name="faq"></a> <div id="faq" class="pages"> <h1>FAQ</h1> <ul> <li> <h2>How does it work?</h2> <p>The magic of the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target">:target pseudo-class in CSS</a>.</p> </li> <li> <h2>What if I have more content?</h2> <p> I've worked with 2-3 MB html files without a problem. That's when smartphone browsers were really choking. ;) For local pages, loading time is no issue after all.</p> </li> <li> <h2>What about REALLY old browsers?</h2> <p>They will see all the content at once, but due to the anchors, the main menu will still work. Add "back to top" links to the pages if you want.</p> </div> <a name="external"></a> <iframe id="external" class="pages" src="http://google.com"></iframe> </body> </html>

編輯-問題編輯后：

如果要保留當前結構，可以執行以下操作：

<a name="page1_1"></a>
<iframe id="page1_1" class="pages" src="page1.html#part1"></iframe>

<a name="page1_2"></a>
<iframe id="page1_2" class="pages" src="page1.html#part2"></iframe>

等等。

Answer 2

為了便於參考，下面的代碼段比代碼段中涉及的更多。 如果您喜歡現場演示，請轉到此PLUNKER 。

作為網站的要求，第一頁必須是index.html ，但是您可以在PC上隨意命名頁面。 請記住，鏈接不包含index.html因為我太懶了，無法包含它，這意味着編寫對您沒有用的代碼。

 // Code goes here var pages = 5; var parts = 3; var pg = []; var pt = []; var menu = document.getElementById('menu'); var i, j; for (i = 0; i < pages; i++) { var page = 'page' + (i+1); pg.push(page); for (j = 0; j < parts; j++) { var part = 'part' + (j+1); pt.push(part); var url = pg[i] + '.html#' + pt[j]; var anchor = document.createElement('a'); anchor.href = url; anchor.textContent = 'Page ' +(i+1) + ' Part ' +(j+1) ; menu.appendChild(anchor); } }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Index</h1> <nav id='menu'></nav> <section id='part1'> <h2>Part1</h2> </section> <section id='part2'> <h2>Part2</h2> </section> <section id='part3'> <h2>Part3</h2> </section> <script src="menu.js"></script> </body> </html>

HTML-鏈接到打開的頁面，然后在該頁面上定位

問題描述

2 個解決方案

解決方案1
0 2016-11-16 22:52:17

解決方案2
0 2016-11-16 23:12:10

HTML-鏈接到打開的頁面，然后在該頁面上定位

問題描述

2 個解決方案

解決方案1 0 2016-11-16 22:52:17

解決方案2 0 2016-11-16 23:12:10

解決方案1
0 2016-11-16 22:52:17

解決方案2
0 2016-11-16 23:12:10