我在公共(public)头文件中有一个静态菜单。每当我通过单击菜单中的链接访问任何页面时，我都需要在该单击的链接上显示一个图像作为激活链接的指示器。
下面是我正在使用的菜单的 HTML
<ul id="in-menu">
<li><a href="unleashing-your-heart" >home</a></li>
<li><a href="fromdaniella" >from Daniella</a></li>
<li><a href="material-list" >material list</a></li>
<li><a href="program" >program</a></li>
<li><a href="testimonials-2" >testimonials</a></li>
<li><a href="#">login</a></li>
</ul>
如何使用 jQuery 或 javascript 实现所需的功能？
最佳答案
为此你不需要 javascript/jQuery
您可以做的是在 <body> 上为您的每个页面指定一个唯一的 ID 或类别。元素或主容器 div无论如何在 HTML 结构顶部附近的某个地方.. 然后也给菜单中的每个链接一个唯一的 ID 或类(如果使用类，它们可以与第一个相同)
例如
<body class="nm-unl">
<ul id="in-menu">
<li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
<li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
<li class="nm-mat"><a href="material-list" >material list</a></li>
<li class="nm-pro"><a href="program" >program</a></li>
<li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
<li class="nm-log"><a href="#">login</a></li>
</ul>
</body>
因此在您的主页上显示 body类可能是 nm-unl并且您的登录页面将有 body类 nm-log等等..菜单本身永远不会改变，所以它仍然可以在一个公共(public)文件中
然后在 CSS 中每个链接都可以具体定位.. 所以说你的普通链接没有图像，但是 :hover而您的“当前”页面可以
#in-menu a {background: none;}
#in-menu a:hover {background: url(image.png) no-repeat top center;}
然后你会把新的/特定的选择器分组到悬停规则选择器中，这些规则比普通的更具体 #in-menu a {}规则，而且它们只会应用于您的“当前页面链接”，即当页面上的两个类相同时
.nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}
您仍然需要 #in-menu选择器中的 ID 以及两个类，否则选择器将没有足够的权重来覆盖默认规则
jQuery 解决方案将以类似的方式工作，逻辑是相同的。您仍然需要一个唯一的页面指示器，即主体类或 ID，然后您将检查主体 ID/类并将当前类添加到相关的匹配链接。
关于javascript - 如何使用 javascript/jQuery 激活菜单链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6289146/