使用Prototype 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

以下是该方法的改进。请注意，根据浏览器的不同，链接的href和window.location.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');

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