javascript - 使用 JAVASCRIPT 单击菜单链接时添加事件类

Question

HTML

<div id="top" class="shadow">
  <ul class="gprc"> 
   <li><a href="http://www.domain.com/">Home</a></li> 
   <li><a href="http://www.domain.com/link1/">Text1</a></li> 
   <li><a href="http://www.domain.com/link2/">Text2</a></li> 
   <li><a href="http://www.domain.com/link3/">Text3</a></li> 
   <li><a href="http://www.domain.com/link4">Text4</a></li> 
 </ul> 

Javascript

window.onload = setActive;
function setActive() {
    aObj = document.getElementById('top').getElementsByTagName('a');
    var found = false;
    for (i = 0; i < aObj.length; i++) {
        if (document.location.href.indexOf(aObj[i].href) >= 0) {
            aObj[i].className = 'active';
            found = true;
        }
    }
    if (!found) {
        aObj[0].className = 'active';
    }
}

问题是，即使我单击其他链接，菜单主页链接也始终保持选中或事件状态，并且我希望在加载页面时不选择它，并且在其他链接打开时也保持不选中状态。我点击了，我在特定的登陆页面上仍保持选中状态。请只使用 Javascript，不要使用 JQUERY。

Answer 1

试试这个:

window.onload = setActive;
function setActive() {
    var aObj = document.getElementById('top').getElementsByTagName('a');
    var found = false;
    for(var i=aObj.length-1; i>=1 && !found; i--) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
            aObj[i].className='active';
            found = true;
        }
    }
    //if you never want home selected remove the next
    if(!found && document.location.href.replace(/\/$/, "") == aObj[0].href.replace(/\/$/, ""))
         aObj[0].className = 'active';
}

通过这种方式，您可以从列表的末尾开始，当您发现巧合时，它会停止搜索事件链接。

希望对你有帮助