指向页面特定区域的 href 外部链接答案

【问题标题】：a href external link to specific area on page指向页面特定区域的 href 外部链接
【发布时间】：2014-04-27 14:42:40
【问题描述】：

所以我有一个导航栏，我想链接到不同的页面，这些页面看起来都一样，但有一个不同的部分。当我开始创建链接时，我意识到它只会链接到其他页面，而不是页面上的特定部分。所以基本上我有一个锚标签的想法，但链接到另一个页面。

我这样做是因为我有基本的编码知识，但不知道如何使用 php 和 javascript。有没有办法用我所拥有的来做到这一点？还是我必须完全尝试不同的方法？

我现在正在学习 javascript，因此可以选择。我听说你可以用数组做点什么？（但不是任何 jquery，因为我们不允许将它用于我们的作业）我也听说过 iframe，但我对它们了解不多。

代码：

HTML

 <nav>
    <ul>
    <li><a href="toursprices.html">TOURS,PRICES &amp; STANDARD FLIGHTS</a></li>
    <li><a href="#">MEET THE STAFF</a></li>
    <li><a href="#">CHARTERS</a></li>
    </ul>
</nav>

【问题讨论】：

标签： javascript html css href

【解决方案1】：

如果您的页面 toursprices.html 包含一个 id 为“abc”的 div，并且您想链接到该部分，您只需像这样编写 href：

<a href="toursprices.html#abc">TOURS,PRICES &amp; STANDARD FLIGHTS</a>

【讨论】：

【解决方案2】：

你可以使用：

<a id="different_section_1">Different Section</a>

在目标页面和导航栏中使用：

<a href="page.html#different_section_1">Page</a>

但是，如果您的页面本质上是相同的，但有一个区域发生了变化。您可能会更好地使用 iframe 或使用 javascript 切换块。

【讨论】：

我想 iframe 会是更聪明的选择，但我听说它们使用起来相当复杂。我想知道使用它们是否会给我带来更多问题，而不仅仅是通过 id 选择它们。
编程原则之一是不要重复自己。您现在所做的是重复大块 html。这意味着如果您想更改重复块中的文本，则必须对所有块执行此操作。如果您这样做是为了完成家庭作业，那么您的解决方案可能没问题。但如果这是您必须维护的代码，我会考虑其他选项。

【解决方案3】：

正如“user3472089”所说，您可以通过其 id 指向某个元素。

我在画廊的顶部使用它：

<a href="#top"></a>

我只是在底部放了一个链接或一个模拟按钮，指向那个锚点：

<a href="#top">
    <div id="top_anchor">
      UP 
    </div>
</a>

【讨论】：