CODEWITHSUNDEEP
jquery
user977151
user977151

Reputation: 505

Making menu button highlight

I am using this example http://jsfiddle.net/mekwall/up4nu/ to make my menu link highlight as a user scrolls down. The problem is the example highlights 'li' tag, but i only want 'a' tag to be highlighted. So I tried doing it this way:

if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .removeClass("active")
             .end().filter("[href=#"+id+"]").addClass("active");
       }

I took off parent() from the original code, but this still doesn't achieve what I want. I'm not very good with jQuery yet, so I'm not sure what else to add/remove so only 'a' tag highlights instead of 'li' tag

Upvotes: 0

Views: 103

Answers (2)

federicot
federicot

Reputation: 12341

Here's a working fiddle that highlights the a elements instead of the li elements: Fiddle.

What I did was

  • changed the HTML, so it is the first a element which has class active instead of the first li element by default:

    <a class="active" href="#">Top</a>

  • changed the CSS, so the rules for #top-menu li.active a become
    #top-menu li a.active (so they are applied to the a elements).

  • changed the JavaScript to work with all of this:

      menuItems
      .removeClass("active")
      .filter("[href=#"+id+"]").addClass("active");

Upvotes: 1

glautrou
glautrou

Reputation: 3198

Your result on JSFiddle.

There was a mistake with .parent() (lines 42-43).

I also adapted the HTML markup to correspond:

<li>
    <a href="#" class="active">Top</a>
</li>

and CSS:

//#top-menu li.active a {
#top-menu li a.active {

Upvotes: 0

Related Questions