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

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 模板中找到了这个，该模板包含此命令作为

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

我认为您在使用旧版浏览器（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>

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

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

在锚标记中使用此 target="_blank" 属性在新选项卡xyz 中打开页面

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

Answer 5

在锚标记中使用此 target="_blank" 属性在新选项卡xyz 中打开页面