导航到另一个页面上的锚点

Question

我只是想从一个页面导航到另一个页面上的特定点。

我的主页有四个部分：

<section>
   <a name="section1"></a>
</section>

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

第 2 节和第 4 节的功能在每个页面上，所以我的导航看起来像：

<nav>
    <ul>
        <li><a href="index.html#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="index.html#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
    </ul>
</nav>

链接没有导航到索引页面或索引页面的所需部分。

现在我有：

<section>
       <a name="section1"></a>
</section>

<section id="section2">

</section>

<section>
   <a name="section3"></a>
</section>

<section id="section4">

</section>

还有我的导航：

<nav>
    <ul>
        <li><a href="#section1">ABOUT</a></li>
        <li><a href="#section2">APARTMENTS</a></li>
        <li><a href="#section3">LANDLORDS</a></li>
        <li><a href="#section4">CONTACT</a></li>
    </ul>
</nav>

还是不行。

Answer 1

您确定将文件放在同一目录中吗？我已经测试了您提供的代码并且它正在工作。但是，您可以试试这个（给部分 id 的不同方式）：

<section>
    <a id="section1">
        CONTENT
    </a>
</section>

如果你已经这样做了，只需使用相同的链接方式：

<a href="different-page.html#section1">Section One</a>

Answer 2

检查您的 JavaScript 代码中是否有“event.preventDefault();”行。

我在 W3Schools Bootstrap 模板中发现了这个，该模板包含这个命令作为

块的一部分，可以很好地滚动到主题标签。一旦我将其注释掉，链接就可以正常工作。

Answer 3

我认为您在使用旧版浏览器（Internet Explorer 8 及以下）时遇到了这个问题。因为我已经在 Firefox、Chrome 和Internet Explorer 9 中测试过了。它工作正常。但它在旧版浏览器中失败了。

为此，您必须使用锚标记 (a) 而不是 div id。

例子：

<a name="section1"></a>
<section>section content goes here </section>

<a name="section2"></a>
<section>section content goes here </section>

<a name="section3"></a>
<section>section content goes here </section>

<a name="section4"></a>
<section>section content goes here </section>

现在你可以为你的部分元素使用任何你想要的类名...

Answer 4

您需要一个姓名标签，请参阅 http://www.w3schools.com/tags/att_a_name.asp