如何使用JS的「活動頁面」狀態類

我的網站使用類似於本教程一個css導航，http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/如何使用JS的「活動頁面」狀態類

這是一個單頁網站。

我需要這樣做，當你點擊一個鏈接並滾動到它的相關內容時，我的類名爲「active」將被應用於標記。

這是我迄今爲止嘗試：

aObj = document.getElementById('navigation').getElementsByTagName('a'); 
     for(i=0;i<aObj.length;i++) { 
     if(document.location.href.indexOf(aObj[i].href)>=0) { 
      aObj[i].className='active'; 
     } 
     } 
    } 
    window.onload = function() { 
    if (window.location.hash.length > 1) { 
     page = window.location.hash.split("#")[1]; 
     load(page); 
    } 

}

我不知道JS，這是我的安樂窩。由於

編輯

一個朋友向我指出這個網站http://imakewebthings.github.com/jquery-waypoints/。

我的頁面是如何設置的簡要概述：

<div id="home"> 
    <h1>Homepage</h1> 
</div> 
<div id="portfolio"> 
    <h1>Portfolio</h1> 
</div> 
<div id="contact"> 
    <h1>Contact Us</h1> 
</div> 
<div id="navigation"> 
    <ul> 
    <li><a href="#home">home</a><li> 
    </ul> 
</div>

它仍然不會添加類的標記，有什麼建議？

來源

2011-03-02 Jonathan Musso

您是否複製並粘貼了所有相關代碼？在for循環之後，你有太多的關閉花括號來證明開啓花括號的數量... – FarligOpptreden 2011-03-02 13:24:00

我提出了一個建議，但是你確實沒有問過一個具體的問題。有什麼問題，我們如何提供幫助？ – 2011-03-02 13:51:09

問題是它不會將該類添加到鏈接。 – 2011-03-02 14:07:59

我將指出一個調整 - 您將導航元素設置爲「活動」類，但不要刪除它。這將照顧到：

aObj = document.getElementById('navigation').getElementsByTagName('a'); 
for(i=0;i<aObj.length;i++) 
{ 
    if(document.location.href.indexOf(aObj[i].href)>=0) 
    { 
     aObj[i].className='active'; 
    } 
    else 
    { 
     aObj[i].className='inactive'; 
     //or set to '', or whatever your default is  
    } 
}

來源

2011-03-02 13:50:25

謝謝。還有一個問題，班級沒有分配。 – 2011-03-02 14:44:08

這樣的事情？

window.onload = function() { 
    aObj = document.getElementById('navigation').getElementsByTagName('a'); 
    for(i=0;i<aObj.length;i++) 
    { 
     aObj[i].onclick = function() 
     { 
      //alert(this.href.split("#")[1]); 
      load(this.href.split("#")[1]); 
     } 
    } 

    if (window.location.hash.length > 1) { 
     page = window.location.hash.split("#")[1]; 
     load(page); 
    } 
} 
function load(p) 
{ 
    aObj = document.getElementById('navigation').getElementsByTagName('a'); 
    for(i=0;i<aObj.length;i++) 
    { 
     aObj[i].className = (p==aObj[i].href.split("#")[1]) ? 'active':''; 
    } 
}

來源

2011-03-02 15:56:13 Jonas

只是要清楚，你撥打的增加了「活動」類的鏈接中的所有鏈接的onclick代碼，對不對？因爲這是你的示例代碼中缺少的。它只是貫穿所有鏈接一次。所以在當前狀態下，當用戶點擊鏈接時，您的JavaScript代碼不會運行。

來源

2011-03-02 16:16:00 Berklee

如何使用JS的「活動頁面」狀態類

回答

相關問題