Use JavaScript to style a link by changing its class attribute

Question

Edit: I suspect the problem has to do that since all my # anchors are on the same page, unless I reload the page, JavaScript just doesn't know about my clicks on the link. I don't know how to solve this problem though...:(

I'm trying to make a clicked link stay blue if the section it points to is shown. This is the code (I put the Javascript code just before the closing body tag as suggested by 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;
}

However it does not seem to work. Can anyone help? Thanks!

Add console.log(links[i].href+" "+window.location.hash) inside your loop but outside the if and see what you get. — jimw
– jimw, Commented Apr 19, 2012 at 12:56
Please post your real HTML. The markup you did post isn't even close to valid. The <a> tags are left unclosed with > — Michael Berkowski
– Michael Berkowski, Commented Apr 19, 2012 at 12:58
there are no javascript errors; how do I check the console log? Yes, I just corrected my code; thanks for pointing that out! — nubicurio
– nubicurio, Commented Apr 19, 2012 at 13:20
The console log says 127.0.0.1/application/home.html#section1 127.0.0.1/application/home.html#section2 127.0.0.1/application/home.html#section3 — nubicurio
– nubicurio, Commented Apr 19, 2012 at 13:29

andrewpthorp · Accepted Answer · 2012-04-19 12:59:41Z

3

Your anchor tags aren't closed, make sure they look like this:

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

Notice the closing " and > that your code is missing.

Also, did you wrap the JavaScript code in a <script> block?

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

answered Apr 19, 2012 at 12:59

andrewpthorp

5,1168 gold badges38 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nubicurio Over a year ago

Thanks; I'm a really lousy coder:( Yes, the code is wrapped in a <script> block...

fmgp · Accepted Answer · 2012-04-19 13:01:46Z

2

Your href may be absolute in that case, not just hashes:

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

answered Apr 19, 2012 at 13:01

fmgp

1,63617 silver badges17 bronze badges

3 Comments

nubicurio Over a year ago

I changed my code to if(links[i].href == "http://"+window.location.hostname+window.location.pathname); but it doesn't help any either...

fmgp Over a year ago

why not just: if(links[i].href == window.location.href) ?

nubicurio Over a year ago

Yes, I did just that too; but it's not helping. I noticed that when the page first loads, the console indicates every window.location.href of links[i] is something.com/index.html. When I click on a link, the window.location.href doesn't get changed. However, if I say click on the link that points to #section2 and hit the reload button, window.loacation.href for all links[i] become something.com/index.html#section2, and the section2 link becomes blue too.

ArVan · Accepted Answer · 2012-04-19 13:00:02Z

1

Maybe you need to put the script inside a function, link it in the header and then call it on load.

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()">

Also note the var links = ... Meaning a declaration.

answered Apr 19, 2012 at 13:00

ArVan

4,2659 gold badges39 silver badges58 bronze badges

1 Comment

nubicurio Over a year ago

Thanks, I tried your suggestion but It doesn't work either. Would you mind reading a comment I wrote to fmgp? I think that's what's causing the problem...

Collectives™ on Stack Overflow

Use JavaScript to style a link by changing its class attribute

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related