Question

我的网站使用与本教程类似的css导航http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

这是一个单页网站。

我需要这样做，当你点击一个链接并向下滚动到它的相关内容时，我的名为“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>

它仍然不会将该类添加到标记中，有任何建议吗？

Answer 1

我将指出一个调整 - 您将导航元素设置为“活动”类，但从不删除它。这将解决这个问题：

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

Answer 2

这样的东西？

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

Answer 3

为了清楚起见，您正在调用代码，将“活动”类添加到所有链接的onclick中的链接，对吧？因为这是您的示例代码中缺少的内容。它只需运行一次所有链接。因此，在当前状态下，当用户点击链接时，您的javascript代码不会运行。

如何将JS用于“活动页面”状态类

3 个答案: