使用原型 JS 突出显示当前菜单项

Question

挑战在于将当前菜单项设置为在 magento 中处于活动状态，它使用 Prototype JS 而不是 JQuery。

Answer 1

<ul id="mainmenu">
<li><a href="{{store url=''}}">home</a></li>
<li><a id="menuItem" href="{{store url='our-cakes'}}">Our Cakes</a></li>
<li><a href="{{store url='about-us'}}">About us</a></li>
<li><a href="{{store url='Outlets'}}">Outlets</a></li>
<li><a href="{{store url='franchise'}}">Franchise</a></li>
<li><a href="{{store url='contacts'}}">contact us</a></li>
</ul>
<script type="text/javascript">// <![CDATA[
document.observe("dom:loaded", function() {
$(mainmenu).childElements().each(function(e){
var h = e.down('a').readAttribute('href');
if(h == window.location){
e.addClassName("current");
}
});
});
// ]]></script>

Answer 2

这是该方法的改进。请注意，根据浏览器的不同，链接和 window.location.href 的 href 可能具有子字符串匹配，但不是完全匹配，因为浏览器从上下文中提供的 URL 的其余部分。只是==不会成功。

var here = $$('#mainmenu a').sortBy(function(a){
  return a.href.length;
}).reverse().find(function(a){
  return window.location.href.include(a.href);
});
if(here) here.up().addClassName('current');

此外，这是首先寻找最长的匹配项，因此您不会在主页链接/上突出显示所有菜单项。