使用JavaScript通过更改类属性来设置链接的风格

编辑：我怀疑问题必须这样做，因为我的所有锚点位于同一页面上，除非我重新加载页面，JavaScript并不知道我的点击次数在链接上。我不知道如何解决这个问题，但... :(使用JavaScript通过更改类属性来设置链接的风格

我试图让点击链接保持蓝色，如果它指向的部分显示。这是代码（我把Javascript代码正如由this tutorial提出的结束标记）HTML之前。

<ul id="menu"> 
    <li><a href="#section1">section1</a></li> 
    <li><a href="#section2">section2</a></li> 
    <li><a href="#section3">section3</a></li>

的JavaScript

links = document.getElementById("menu").getElementsByTagName("a"); 

for(i=0; i<links.length;i++) { 
    if(links[i].href == window.location.hash) { 
    links[i].className = "active"; 
    } 
}

CSS

a.active { 
    color:blue; 
}

但是它似乎并不奏效。谁能帮忙？谢谢！

来源

2012-04-19 nubicurio

你在页面上得到一个JavaScript错误？ – alphanyx 2012-04-19 12:56:37

在你的循环内但在if之外添加'console.log（links [i] .href +“”+ window.location.hash），看看你得到了什么。 – jimw 2012-04-19 12:56:41

请发布您的真实HTML。您发布的标记甚至没有接近有效。 ''标签没有'''' – 2012-04-19 12:58:31

你的锚标签没有被关闭，确保他们看起来像这样：

<a href="#section1">Link Text</a>

通知收盘"和>你的代码丢失。

此外，您是否将JavaScript代码封装在<script>块中？

<script> 
    all of your javascript inside of this script block 
    </script> 
</body>

来源

2012-04-19 12:59:41 andrewpthorp

谢谢;我是一个非常糟糕的编码器:(是的，代码被封装在一个

也许你需要把脚本函数内部，它的标题链接，然后调用它的负载。

function f(){ 
    var links = document.getElementById("menu").getElementsByTagName("a"); 

    for(i=0; i<links.length;i++) { 
    if(links[i].href == window.location.hash) { 
    links[i].className = "active"; 
     } 
    } 
}

<body onload="f()">

还要注意var links = ...含义的声明。

来源

2012-04-19 13:00:02 ArVan

谢谢，我试过你的建议，但它也不起作用。你介意看看我写给fmgp的评论吗？我想这是什么原因造成的问题... – nubicurio 2012-04-19 15:07:41

您的href可以是绝对在这种情况下，不只是哈希：

if(links[i].href == window.location.hash)

来源

2012-04-19 13:01:46 fmgp

我改变了我的代码if（links [i] .href ==“http：//”+ window.location.hostname + window.location.pathname）;但它没有帮助任何一个... – nubicurio 2012-04-19 13:44:44

为什么不只是：if（links [i] .href == window.location.href）？ – fmgp 2012-04-19 14:27:31

是的，我也这么做了，但没有帮助，我注意到当页面第一次加载时，控制台显示链接[i]的每个window.location.href是something.com/index.html。当我点击链接时，window.location.href不会被更改。但是，如果我说点击指向＃section2的链接并点击重新加载按钮，则所有链接[i]的window.loacation.href将变为something.com/index.html#section2，并且section2链接也变为蓝色。 – nubicurio 2012-04-19 14:56:58

使用JavaScript通过更改类属性来设置链接的风格

回答

相关问题