1

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';
    }
}

問題は、他のリンクをクリックしても、メニューのホーム リンクが常に選択されているかアクティブなままであり、ページの読み込み時に選択されていないこと、およびクリックした他のリンクが選択されていない間は選択されていないことです。特定のランディング ページにいますが選択されたままです。JQUERYではなくJavascriptのみでお願いします。

4

2 に答える 2

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';
}

この方法では、リストの最後から開始し、一致を見つけたときにアクティブなリンクの検索を停止します。

お役に立てば幸いです

于 2013-10-28T20:45:53.367 に答える
0 
function setActive() {
    var top = document.getElementById('top'),
        aObj = top.getElementsByTagName('a'),
        href = document.location.href,
        found = false;

    for (var i = 0; i < aObj.length || !found; i++) {
        if (href.indexOf(aObj[i].href) >= 0) {
            aObj[i].className = 'active';
            found = true;
        }
    }
    if (!found) {
        aObj[0].className = 'active';
    }

    //Listen for link clicks
    function listener(e) {
        if(e.target.tagName === "A") {
            for (var i = 0; i<aObj.length; i++) {//remove previous class
                aObj[i].className = "";
            }
            e.target.className = "active";
        }
    }
    if(top.addEventListener) {
        top.addEventListener(listener);
    } else if(top.attachEvent) {
        top.attachEvent(listener);
    }
}

リンクの 1 つが押されたかどうかを判断できるように、クリック イベントをリッスンする必要があります。簡単な委任を使用してこれを行います

于 2013-10-28T20:55:06.197 に答える