JQuery .each function and changing CSS for link of current page [explanation]

Question

In this thread "How to change the link color of the current page with CSS" @Taraman writes some neat JQuery function that is praised by others. Now I tried to use his code, but unfortunately it didn't work for me. I was busting my brains out to figure out why his code doesn't work for me, but I couldn't figure it out.

I would be very grateful if someone could explain me how his code works and what I'm missing.

Here is my html code:

<html>
<head>
    <script type="text/javascript" src="../js/jquery.js"></script>

    <script>  <!--Taraman's code-->
        $(document).ready(function() {
        $("[href]").each(function() {
           if (this.href == window.location.href) {
            $(this).addClass("active");
                }
            });
        }); 
    </script>
</head>

<body>
  <div id="topnav-bg">
     <div id="topnav">
         <ul>
            <li><a href="../index.html">Home</a></li>  <!--dots mean "www.myurlsomething.com"-->
            <li><a href="../about.html">About</a></li>
            <li><a href="../science.html">Science</a></li>
            <li><a href="../adventure.html">Field trip</a></li>
            <li><a href="../team.html">Team</a></li>
            <li><a href="../biblio.html">Bibliography</a></li>
         </ul>
     </div>
  </div>
</body>
</html>

And below is my css code:

#topnav-bg      {clear:both; background-color:#FAF7C0; }
#topnav ul      { margin: 10px 0; padding: 3px 0;  }
#topnav ul li   { display:inline; }
#topnav ul li a { padding: 0 9px; font: bold 14px Verdana;  }

#topnav a:link      { color: black; }
#topnav a:visited   { color: black; }
#topnav a:hover     { color: grey;  }
#topnav a:active    { color: blue;  }
#topnav a:focus     { color: blue;  }

.active  { color: blue; font-weight: bold;}

So what I would like to achieve with my code is that when I'm on "About" page, link/word About is coloured blue, while others (Home, Science, ...) are black, etc.
This is probably "no-brainer" for some of you, but I'm obviously missing something.
I would like to know what this line $("[href]").each(function() does? Should "[href]" be changed by something else?
This line if (this.href == window.location.href) returns page location, right? So in my case this should be "www.myurlsomething.com/about.html, right?
Taraman is also mentioned something about url parameters if (this.href.split("?")[0] == window.location.href.split("?")[0]) .... What this code does and to what url parameters was he referring? Should I use this?
I know this is a lot of questions, probably stupid questions. But like they say: "There is no such thing, as a stupid question." :)

Thank you for your help!

DinoMyte · Accepted Answer · 2016-01-13 21:41:59Z

1

window.location.href points to the url path that you see at the url navigation bar in the browser.

this.href == window.location.href

basically checks if the attribute href value is equal to the url. In your case, even though this.href returns the absolute path, the chances are they might not be equal.

In order to make it work, you need to find the matching instance of text ( done here through split() ) and compare it with the url.

$(document).ready(function() {      
    $("[href]").each(function() {
       if (window.location.href.indexOf(this.href.split('/')[this.href.split('/').length - 1]) != -1){
              $(this).addClass("active");
            }
        });
    });

Here's an example : https://jsfiddle.net/DinoMyte/so000t49/3/

edited Jan 13, 2016 at 21:41

answered Jan 13, 2016 at 21:29

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

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

4 Comments

sursek Over a year ago

This code works and yet there is no color change. Let me explain. in browser I clicked "Inspect" and found out that code works fine, because class="active" was added to <li> </li> line. However under "Styles" tab style for .active was strike-through. On the other hand #topnav a:visited and #topnav a:link styles where not strike-through which means that color of text remains black. How to fix this?

DinoMyte Over a year ago

Just add !important to the .active css. Here's the fixed version : jsfiddle.net/DinoMyte/so000t49/6

sursek Over a year ago

Thank you DinoMyte, it works perfectly. Could you explain to me this part of the code if (window.location.href.indexOf(this.href.split('/')[this.href.split('/').length - 1]) != -1). Thank you!

DinoMyte Over a year ago

Like I mentioned, that the whole idea is to compare just the page name in the url with the anchor link's href. (window.location.href.indexOf(this.href.split('/')[this.href.split('/').length - 1]) != -1) basically splits the url with delimiter '/' and tags the index n-1 where n is the length of the url. This would give you just the page name ( like about.html ) and then you basically check it's occurence using indexOf javascript function in the anchor tag's href attribute.

user4744712 · Accepted Answer · 2016-01-13 21:48:11Z

0

Might want to note that using an attribute as a selector as well as iterating over that is probably not the most efficient approach. You might consider using a class selector or at the very most a tag selector, then caching your anchor elements as a jquery object in a variable and iterating over the variable instead so you traverse the DOM once instead of iterating over the DOM for each a[href] element.

answered Jan 13, 2016 at 21:48

user4744712

Collectives™ on Stack Overflow

JQuery .each function and changing CSS for link of current page [explanation]

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related