0

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!

Community
  • 1
  • 1
sursek
  • 43
  • 4

2 Answers2

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/

DinoMyte
  • 8,737
  • 1
  • 19
  • 26
  • 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 `
    • ` 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? – sursek Jan 15 '16 at 08:18
  • Just add !important to the .active css. Here's the fixed version : https://jsfiddle.net/DinoMyte/so000t49/6/ – DinoMyte Jan 15 '16 at 17:43
  • 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! – sursek Jan 18 '16 at 08:39
  • 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. – DinoMyte Jan 19 '16 at 18:05