HTML-链接到打开的页面，然后在该页面上定位
[英]HTML - link to open page, then to anchor on that page
问题描述
I'm working on a fairly extensive local website. 
我正在一个相当广泛的本地网站上工作。 It is not on a web server, and I am more or less restricted to HTML and JavaScript. 它不在Web服务器上，我或多或少地局限于HTML和JavaScript。
I have a side navigation menu on all the pages that is called with this statement: 我在用此语句调用的所有页面上都有一个侧面导航菜单：
<script type="text/javascript" src="menu/menu.js"></script>
menu.js is essentially a list of links like this: menu.js本质上是这样的链接列表：
document.write("<a href='page5.html#part1'>Part 1</a>");
In place on all the pages is a sticky header script that is making linking to anchors cumbersome. 在所有页面上都有一个粘滞的标题脚本，该脚本使链接到锚点变得麻烦。 If you're currently on the page the link is linking to and ABOVE the anchor the link is linking to, it works fine. 如果您当前在页面上，链接正在链接，并且链接已链接到锚点上方，则可以正常工作。 But if you're currently below the anchor on the same page, it gets glitched up. 但是，如果您当前位于同一页面的锚点之下，则它会出现故障。 It doesn't take you to where it should. 它不会带您去应该去的地方。
There's probably another way to do it, but I feel like an easy-to-implement solution would be to create a link that first opened the page at the top, and THEN took you to the anchor. 可能还有另一种方法，但是我觉得一个易于实现的解决方案是创建一个链接，该链接首先在顶部打开页面，然后将您带到锚点。
I tried using @Qwerty's solution from this question ([ Force page reload with html anchors (#) - HTML & JS ), but it didn't work. 我尝试从这个问题中使用@Qwerty的解决方案（[ 用html锚点（＃）-HTML＆JS强制重新加载页面 ），但是没有用。 I tried this: 我尝试了这个：
document.write("<a href='page5.html#part1' onclick='location.reload()'>Part 1</a>");
I'm guessing it didn't work because of it being local and/or because of the link being read from a JS file. 我猜因为它是本地的和/或因为从JS文件读取链接，所以它不起作用。
Example For simplicity's sake, let's say there are 3 pages on the site and each page has 3 anchors on it. 示例为了简单起见，假设站点上有3个页面，每个页面上都有3个锚点。 I want this external JS menu to be on and work on all pages. 我希望此外部JS菜单打开并在所有页面上都能工作。 It has these links: 它具有以下链接：
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
2 个解决方案
解决方案1
0 2016-11-16 22:52:17
This may either be brutally irrelevant to your question or give you an idea, how your app could be structured better. 这可能与您的问题毫无关系，也可能给您一个想法，如何更好地构建您的应用程序。 To handle your navigation needs, you don't need Javascript. 为了满足您的导航需求，您不需要Javascript。 But you can add it to the mix to improve this solution with nice gimmicks. 但是您可以将其添加到组合中，以使用不错的头来改进此解决方案。
<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>
EDIT - after question-edit: 编辑-问题编辑后：
If you want to keep your current structure, you could just do: 如果要保留当前结构，可以执行以下操作：
<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>
and so on. 等等。
解决方案2
0 2016-11-16 23:12:10
The Snippet below is for ease of reference there's more involved with this than what is in the Snippet. 为了便于参考，下面的代码段比代码段中涉及的更多。 If you like a live demonstration go to this PLUNKER . 如果您喜欢现场演示，请转到此PLUNKER 。
The first page must be index.html as a requirement of the website, but you may name your pages however you want on your PC. 作为网站的要求，第一页必须是index.html ，但是您可以在PC上随意命名页面。 Keep in mind the links do not include index.html because I'm too lazy to include it, it would mean writing code that wouldn't be useful for you. 请记住，链接不包含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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.