给定一个带有两个图标的 HTML 文档,任务是在用户每次点击图标时交替显示图标。借助 jQuery(一个 JavaScript 库)可以轻松完成此任务。
方法:方法是简单地向两个图标添加一个“点击”事件侦听器,并使用 jQuery 切换两个图标的 CSS 类。这些类最终负责显示图标库(在本例中为 Fontawesome)中的特定图标。在这里,我们使用了两个图标,
- 一个类名为“fa-bars”(菜单图标)
- 一个班名为“fa-times”(十字图标)
每当用户单击菜单图标时,其“fa-bars”类将切换为“fa-times”,因此将显示十字图标,反之亦然。
例子:
HTML
输出: