在前端开发中，我们经常需要从 URL 中获取参数或者哈希值进行业务逻辑的处理。本文将介绍如何使用 jQuery 获取 URL 中的哈希值，并给出详细的代码示例和解释。
什么是 URL 哈希值
URL 中的哈希值（Hash）是指 URL 中 # 后面的部分，常用于锚点跳转和前端路由等场景。例如，下面这个 URL 中的哈希值为 #section-2：
https://example.com/page.html#section-2
如何使用 jQuery 获取 URL 哈希值
使用 jQuery 获取 URL 中的哈希值非常简单，只需要使用 window.location.hash 属性即可。
var hash = window.location.hash; console.log(hash); // 输出当前页面 URL 的哈希值
上述代码会输出当前页面 URL 的哈希值，比如 #section-2。如果当前页面没有哈希值，则输出空字符串 ""。
实战案例：利用 URL 哈希值实现网站导航
我们可以利用 URL 中的哈希值实现一个简单的网站导航，通过点击网站中的链接跳转到不同的页面区域。
HTML 代码如下：
-- -------------------- ---- -------
----
------ ------------------------- ----------
------ ------------------------- ----------
------ ------------------------- ----------
-----
---- ---------------
----------- ------
------------------
------
---- ---------------
----------- ------
------------------
------
---- ---------------
----------- ------
------------------
------CSS 代码如下：
-- -------------------- ---- -------
-- ----- ------- --
------- -
-------- -----
-
-- ------- ------- --
-------------- -
-------- ------
-JavaScript 代码如下：
-- -------------------- ---- -------
---------------------------- -
-- ------------- ------- --
-------------------------------
-- -- --- ----- --
-------------------------- ---------- -
-- --------- ------- --
--------------------
-- ------------- ------- --
-------------------------------
---
---上述代码实现了一个简单的网站导航功能，点击页面中任意一个链接都会跳转到相应的区域，并且地址栏中的哈希值也会随之改变。
总结
本文介绍了如何使用 jQuery 获取 URL 中的哈希值，以及如何利用哈希值实现网站导航功能。希望本文能为前端开发者提供一些帮助和借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9601
