突出显示当前菜单项使用原型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'); 

此外，这是寻找最长匹配第一个，这样你就不会得到所有的菜单项突出了家乡链路上/。