Question

这是如何工作的？一个例子是jquery选项卡，它们具有：

<a href="#home">home</a>
<a href="#work">work</a>

他们如何将javascript链接到锚点？

我见过没有锚点和实现的实现，但我不明白为什么？这些锚点是否像没有锚点那样有“点击”事件？

Answer 1

我不是100％你想知道的，但这是我试图回答你的问题：

为什么没有使用ID？

有多种方法可以选择元素，而不仅仅是使用id。特别是当您想要一次选择多个元素时，id对您没有多大帮助。 jQuery (sizzle) selectors ^[docs]是CSS3 selectors ^[docs]的超集例如。假设链接全部包含在一个标识为#tabs的元素中，我们可以这样做：

$('#tabs a').click(function(){...});

将click事件处理程序附加到所有链接（有关此方法的详细信息，请参阅.click() ^[docs]）。

为什么使用了链接（<a>）？

链接（锚元素）是HTML中用于链接到某些内容的自然元素。这可以是其他网址或even an element in the same page ^[docs]。 <a href="#home">home</a>链接到name 主页的锚点或id 主页的任何其他元素。因此，即使禁用了JavaScript，这些链接仍然可以工作并使浏览器滚动到链接元素。

此外，地址栏中的URL将更改，并且将创建新的历史记录条目。

进一步阅读： W3C - HTML4, section 12.2: The A element。

稍后添加JavaScript功能，但保持网站无需JS，通常称为unobtrusive JavaScript ^[Wikipedia]。

Answer 2

<a href="#footer">Go to footer</a>

与

不同

$('a#footer').something()

'导致id在这种情况下适当的HTML将是：

<a id="footer">Footer</a>

此锚点“相同页面链接”能够滚动页面，为您提供所需的视图元素。

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

现在位于页面底部，距离很远，你有一些

<div id="footer">contact | about | home | back to top <br> Copyright (C) 2011 user781439 .....  </div>

它会为你滚动页面:) http://jsfiddle.net/roXon/sPBPM/

例如，jQuery可以使用'＃'将外部元素加载到页面中，但只是直接引用指定的ID元素。带有'＃'的href是“ID来电者”。

Answer 3

链接与链接的美妙之处在于页面仍然可以在没有javascript的情况下运行。

至于他们如何将javascript与锚点链接起来......

JavaScript可以看到在JS运行之前加载的所有HTML。（在jQuery中，我们通过监听the ready event来确保JS等待合适的时刻。

浏览器提供了识别和操作HTML代码的工具，jQuery这样的库以方便和标准化的形式打包这些工具。

因此，要将JS与这些锚链接起来，我们可以执行以下操作：

$('a[href="#home"]').css ('color', 'red');

或者：

$('a[href="#work"]').click ( function () {
alert ("Still workin', boss!");

}）;

See what it looks like in action at jsFiddle.

在这里，我们并不真正需要id，因为href，锚值是唯一且具有描述性的。通过省略id，代码更清晰，开发人员不必维持：anchors，hrefs和id之间的相关性。

Answer 4

为了使用，可能会设置onhashchange，或者在点击事件中检查href（例如使用开关）。

为什么要在id上使用它，也许是为了开始，如果例如#firework抛出一个脚本烟花，如果你通过http://url/page#firework到达页面，可以在开始时检查哈希并播放事件。

使用javascript进行html锚点

4 个答案: