基于JQuery实现导航菜单高亮显示

在Web开发中，导航菜单是网站或应用中非常常见的组件，而高亮显示当前激活的导航菜单项则是提高用户体验的重要一环。本文将介绍两种基于JQuery实现导航菜单高亮显示的方法，并包含示例代码和详细解释。

方法一：使用CSS选择器

最简单的实现方法是在HTML和CSS中使用类似“current”这样的特殊类名来标识当前激活的导航菜单项，然后使用CSS选择器来设置高亮样式。具体步骤如下：

HTML结构

--- ------------
  ------ ----------------------
  ------ -----------------------
  --- ------------------ --------------------------
  ------ -------------------------
-----

请注意，这里我们给第三个<li>元素添加了一个"current"类，以标识当前激活的导航菜单项。

CSS样式

---- ---------- - -
  ------ -----
-

这里的CSS选择器.nav li.current a会匹配所有属于.nav类的<li>元素中带有"current"类的子元素<a>，并将它们的文本颜色设置为红色。

优缺点

这种方法非常简单，容易理解和实现，但缺点是它不太灵活：一旦确定了"current"类的名字和HTML结构，就无法轻松地更改它们。此外，在某些情况下，使用CSS选择器会导致性能问题。

方法二：使用JQuery

更具灵活性的方法是使用JQuery来动态设置高亮样式，而不需要在HTML或CSS中添加特殊类名。具体方法如下：

HTML结构

--- ------------
  ------ ----------------------
  ------ -----------------------
  ------ --------------------------
  ------ -------------------------
-----

此时，我们没有给任何<li>元素添加特殊类名。

JQuery代码

---------------------------- -
  ------- ------------------- -
    -- --------------------- --- ------------------------- -
      ---------------------------
    -
  ---
---

这里的JQuery代码首先查找.nav中所有子元素<a>，并遍历它们以查看哪个链接与当前页面的URL匹配。如果匹配成功，则给该链接添加一个新的"active"类来设置高亮样式。

优缺点

这种方法比第一种方法更灵活，因为我们不需要在HTML或CSS中添加特殊类名。但是，它的缺点是它需要使用JQuery库，并且相对于第一种方法来说，代码更加复杂。

总结

两种方法都可以成功实现导航菜单高亮显示，选择哪种方法取决于具体情况和需求。如果您只需要简单地高亮当前激活的导航菜单项，那么第一种方法可能更适合；如果您需要更灵活的解决方案，或者需要避免在HTML或CSS中添加特殊类名，那么第二种方法则更好。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/4136