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>");

在所有页面上的位置是一个粘性标题脚本，使得链接到锚点很麻烦。如果您当前正在页面上链接链接到链接链接到的链接上，那么它可以正常工作。但是，如果您目前位于同一页面上的锚点之下，则会出现问题。它并没有把你带到它应该的位置。

可能还有另一种方法，但我觉得一个易于实施的解决方案是创建一个首先在顶部打开页面的链接，然后把你带到锚点。 / p>

我尝试使用@ Qwerty这个问题的解决方案（[Force page reload with html anchors (#) - 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，因为我懒得包含它，这意味着编写对您无用的代码。

＆＃13;

// 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);
  }
}

＆＃13;

<!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>

＆＃13;

HTML - 链接到打开页面，然后锚定在该页面上

2 个答案: