$(function(){
$("a").each(function(){
if ($(this).attr("href") == window.location.pathname){
$(this).addClass("selected");
}
});
});This function will add the class “selected” to any links (even relative) that point to the current page.
I’m looking for a script that has a menu that shows what part of the page ur on. EX:
LINK 1 LINK2 LINK3 (bold cause ur on that area)
LINK 3 Area
This is exactly what I’m looking for, but I’m unsure how to deploy it…
Does this need to go in Script tags in the Head section of my page?
How do I define the “selected” class in my styles.css sheet?
How can I edit this line:
if ($(this).attr(“href”) == window.location.pathname){
into something that may result to true as long as the pathname is found. I need an alternative for the == operators. Is there something in JS that emulates SQL’s “LIKE”?
Thanks.
You can use regular expressions to achieve functionality that emulates SQL’s “LIKE.” It’s much, much more powerful that “LIKE,” but also much, much more complicated to learn.
Trying to explain it here is beyond the scope of this issue, but you can find more information about JavaScript’s
.match()method at https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/match and all you could ever need to know about Regular Expressions at http://www.regular-expressions.info/javascript.html.While complicated to learn, Regular Expressions (often abbreviated RegEx or RegExp) are incredibly useful and while I still have a lot to learn about them, what I have learned has made a lot of complicated situations a lot simpler.
Thank you very much for this, there are hundreds of scripts about that do this , but this is the first one that actually works, does what it says on the tin. You are a genious, and have saved me a lot of pain, Thanks again!!!!!!!!!
Ah, this is so difficult! I don’t understand any of it :(
I guess I’ll just have to pay someone to keep working on my site.
Mmm, don´t sure why but is not working for me.
I think that wordpress make this automatically adding .current to the currents pages.
This looks to be the most succinct code I’ve come across for this. But I still can’t get it to work. I’m working on a Childtheme of Twenty Ten. If you have any tips on why it’s not working would love to hear it.
Above code didn’t work for me, but this code I found did…
The reason this is is because the
.attr()method in jQuery returns what is actually in the href attribute.This may not be what matches window.location.pathname since if you page is “http://google.com/test/” your href could be “http://google.com/test/” or “test/” or “/test/”
By using
this.href, it’s getting the property of the anchor tag’s href and not that set attribute. The property will always be a full URL, which matches window.location (which is really just window.location.href).If you have jQuery >= 1.6, you can use the
.prop()method to get the property. So this is virtually identical to your snippet, just using the jQuery.prop()method.(So in this example,
this.hrefis the same as$(this).prop('href')and it works better because it will be in a form that is more consistent with window.location.href.)I hope that helps clarify the situation. There are some things that still might cause them not to match, but this will definitely hit more cases than the code in the original post.
You can reference http://stackoverflow.com/questions/5874652/prop-vs-attr for more about prop vs attr.
This code worked for me as well.
Works like a charm> thank Chris
Thanks sir.. it is really working..! :-D
thanks once again.
Thank you so much.
for anyone having trouble implementing this, all you need to do is:
1. place the code snipped inside in the head of your web document or external .js file
2. create your selector class in your css file.
.selected{color:#F00;} or whatever you like.
after further inspection. this didnt work…
Really handy post – I love the web for this sort of help!
@Bryan, your tip worked a treat for me :o)
Thanks Chris Bowyer.
I just mix both
$(function() {
$(“body a”).each(function() {
if (this.href == window.location) {
$(this).addClass(“selected”);
};
});
});
sometimes (if both classes have same attribute, this case “background”) you should make your css code with !important.
for example; link with class somelink
css code;
a.somelink {
background:white;
}
.selected {
background:red !important;
}
with “!important” , red bg will pass the white bg. and when selected you will see red. if important not given you will see white bg, that case you think code not works ;)
This worked like a charm in my custom Tumblr-theme, and the code is a lot sexier than the other snippets I found on the webz. Did not even break a sweat.
Sweeet.
Used the parent-method to attach .current to ‘s parent .
This worked like a charm in my custom Tumblr-theme, and the code is a lot sexier than the other snippets I found on the webz. Did not even break a sweat.
Sweeet.
Used the parent-method to attach .current to a’s parent li.
Why use
each()whenaddClass()itself iterates over each of the selected elements:Admittedly the ternary/conditional-operator could be replaced by a simple
if/else, for simplicity, but the above is a little more concise, and just as readable I think.David, this works perfect for me! Verrrrrrry nice!
For the benefit of others (newbies like me), this is what I did: Since I am using ‘thispage’ instead of ‘current’ for my class, I changed ‘current’ to ‘thispage’ in the code, like so:
Then, I inserted it in my page just before the
</header>, making sure I wrapped the thing in opening and closing script tags and added a CDN like Google’s (before the function), like so:And then, in my main.css file, I added:
And, PRESTO! it works like a champ!
Thank you David! I been looking for this solution for a long time without success, and now, I can finally say found it. Thanks again.
Hello Chris!
I’m using this snippet to control my custom sidebar menu in WordPress, which is simply a list with a number of links in it (html widget). The script seems to work fine, but i get weird result and i have no clue what exactly causes the problem
The problem is:
only the first link gets the necessary class. If i click other list items, nothing happens – the list item styled as usually, not as my .current-page class says.
I’m probably doing something wrong, but none of the solutions seem to work for me.
Here is my code:
Could you please help?