Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

CSS-sprite Menu And JQuery AddClass() Method

Post a Comment
I've created CSS sprite menu based on this tutorial: http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/ Now I'd like to assign .selected class to the 'a' which

Solution 1:

Clicking a will take you to a different page, so this event is not gonna work for you. To add selected class to the current link you have to code like below:

<script>
 $(function(){ //short form of $(document).ready(function(){
    $("a").each(function(){

       path=window.location;
       path=String(path).split('/')['3']; //if you use absolute URLs then disable this line

       if($(this).attr('href')==path)
       {
          $(this).addClass("selected");
       }
    });
 });
</script>

It will add class selected to link(s) if it's href matches the current URL of the browser.


Solution 2:

I believe you are making this more complicated than it needs to be. Here's a quick solution using CSS instead of bulky JS :)

First off, your body tags should have classes assigned to them.

<body class="products">

for example.

Now, in your menu, assign each <li> (I'm guessing/hoping you are using a list, you didn't supply any code so I don't know...) with classes as well.

<li class="products"><a href="/products/">Products</a></li>

for example.

Now, in your CSS, simply do this:

body.products ul#menu li.products a { /* Define how the "selected" button should look, here. */ }

These CSS rules will then only be "used" when the visitor is on the "selected" page.

This technique is the msot used as it is without a doubt the quickest and very SEO friendly as the code in your main navigation always stays the same across the site.


Post a Comment for "CSS-sprite Menu And JQuery AddClass() Method"