Highlight All Links To Current Page
$(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
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 ;)