概述
menuspy 是一个基于原生 JavaScript 的轻量级的导航菜单高亮展示库。它可以在网站滚动时，根据用户所在的当前位置自动高亮该页面上的哪个导航菜单项。
这个库的优势主要在于其体积小而强大、易于定制和编写、基本不依赖其它库（除了 jQuery）等等。
下面，本文将为大家详细介绍如何使用该 npm 包。
安装
首先，需要确保已经安装了 Node.js 和 npm。在你的项目中，运行以下命令：
npm install menuspy
或者，你也可以将其添加到你的 package.json 文件中：
{
"dependencies": {
"menuspy": "^0.10.0"
}
}然后，你就可以在你的项目中使用它了。
基本用法
在你的 HTML 页面中，使用以下代码：
-- -------------------- ---- -------
---- --------- -------------
----
------ ------------------------ ------------
------ ------------------------ ------------
------ ------------------------ --------------
------ ------------------------ -------------
------ ------------------------ -------------
-----
------
---- ------------- ----------------
----------- --------
------
---- ------------- ----------------
----------- --------
------
---- ------------- ----------------
----------- ----------
------
---- ------------- ----------------
----------- ---------
------
---- ------------- ----------------
----------- ---------
------上面的代码中，我们使用了一个 div 元素作为菜单的容器，并将每个菜单项都放在一个 ul 列表中。同时，我们还添加了一个 id 属性和一个 class 属性，用于后面 JavaScript 的 DOM 操作。
接着，在你的 JavaScript 文件中，使用以下代码：
const MenuSpy = require('menuspy');
const menuSpy = new MenuSpy('#menu', {
menuItemSelector: 'a[href^="#"]',
activeClass: 'active'
});或者，你也可以使用 ES6 的方式：
import MenuSpy from 'menuspy';
const menuSpy = new MenuSpy('#menu', {
menuItemSelector: 'a[href^="#"]',
activeClass: 'active'
});这里，我们首先引入了 MenuSpy 类，并创建了一个新的 menuSpy 实例。在这个实例化过程中，我们需要传入两个参数，分别是菜单容器的选择器和一些参数，并使用 menuItemSelector 来标识菜单项的选择器，以及 activeClass 用于指定当前激活项的样式类名。
接下来，在你的 CSS 文件中，使用以下代码：
.active {
font-weight: bold;
}这里，我们为激活项指定了一个简单的样式。
最后，在你的 HTML 页面顶部，添加 jQuery 的引用：
<head> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> </head>
好了，现在你可以测试该库是否正常运行了。
高级用法
上面，我们已经完成了基本的导航菜单高亮展示功能。下面，我们介绍一些高级的用法。
自定义菜单项选择器
上面的示例中，我们使用了一个默认的菜单项选择器 a[href^="#"]。如果你希望使用自定义的选择器，可以通过在实例化时传入 menuItemSelector 参数来实现。例如：
const menuSpy = new MenuSpy('#menu', {
menuItemSelector: '.menu-item',
activeClass: 'active'
});手动触发一次初始化
如果你需要在菜单或内容区域动态更新后，强制重新计算激活状态，可以手动触发一次初始化。例如：
menuSpy.initialize();
监听事件
menuspy 还支持一些事件，可以通过监听这些事件进行一些自定义操作。例如：
activate 事件
当菜单项激活时，将触发 activate 事件。事件对象中提供了 anchor 属性和 content 属性。例如：
menuSpy.on('activate', (event) => {
console.log(event.anchor); // 当前激活项的链接
console.log(event.content); // 当前激活项对应的内容区域
});deactivate 事件
当某个菜单从激活状态恢复到非激活状态时，将触发 deactivate 事件。事件对象中提供了 anchor 属性和 content 属性。例如：
menuSpy.on('deactivate', (event) => {
console.log(event.anchor); // 被取消激活项的链接
console.log(event.content); // 被取消激活项对应的内容区域
});到此，本文就介绍完运用 npm 包 menuspy 来实现导航菜单高亮展示的方法。希望读者们可以通过本文的介绍和示例代码，快速上手该库，并将其应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bdc