📅 最后修改于: 2023-12-03 15:01:14.353000 🧑 作者: Mango
HTML中的锚文本属性是一种指向页面中其他位置的链接。锚文本创建基本与任何其他 HTML 链接相同。所不同的地方在于 href 属性中的 URL 后面紧跟着 # 字符和锚名称。
<a href="#锚名称">锚文本</a>
<!DOCTYPE html>
<html>
<body>
<h2>HTML 锚文本的例子</h2>
<p>点击下面的网页内部链接重定向到段落。</p>
<a href="#C4">跳转到段落 C4.</a><br>
<h2>C 章节</h2>
<a name="C1">第一段</a>
<p>这是第一段。</p>
<a name="C2">第二段</a>
<p>这是第二段。</p>
<h2>D 章节</h2>
<a name="C3">第三段</a>
<p>这是第三段。</p>
<a name="C4">第四段</a>
<p>这是第四段。</p>
</body>
</html>
当用户点击“跳转到段落 C4.”链接时，浏览器将滚动到 id 属性等于 "C4" 的元素，这里是 id 为 "C4" 的 元素。
在 Javascript 中，我们可以使用 location.hash 属性来获取当前的 URL 锚文本。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 获取当前锚文本的例子</h2>
<p>点击链接获取当前锚文本。</p>
<a href="#C4" onclick="displayAnchor()">跳转至段落 C4.</a><br>
<h2>C 章节</h2>
<a name="C1">第一段</a>
<p>这是第一段。</p>
<a name="C2">第二段</a>
<p>这是第二段。</p>
<h2>D 章节</h2>
<a name="C3">第三段</a>
<p>这是第三段。</p>
<a name="C4">第四段</a>
<p>这是第四段。</p>
<script>
function displayAnchor() {
alert("当前锚文本为: " + location.hash);
}
</script>
</body>
</html>
当用户点击“跳转至段落 C4.”链接时，浏览器将滚动到 id 属性等于 "C4" 的元素，同时弹出一个提示框，显示当前锚文本为 "#C4"。
锚文本属性是一种非常有用的技术，用于在页面的不同部分进行导航。除了基本的 HTML 和 JavaScript 之外，许多浏览器和 JavaScript 库都提供了更高级的功能，例如滚动、平滑过渡和事件处理。掌握锚文本属性可以帮助你更好的构建交互式 Web 应用程序。