jQuery - ScrollTo - focus menu on selected target

Question

Is it possible to add "active" or "inactive" on a menu that uses scrollTo to indicate if the visitor have selected that menu option or not.

Like:

<ul>
 <li><a href="#target1" class="inactive">Target 1</a></li>
 <li><a href="#target2" class="active">Target 2</a></li> <-- selected.
 <li><a href="target3" class="inactive">Target 3</a></li>
...
</ul>

can you show the script when link is clicked – Sibu Aug 16 '12 at 07:31 — Sibu, Aug 16 '12 at 07:31
@Sibu I got a solution down below, thanks though! – Philip Aug 16 '12 at 08:00 — Philip, Aug 16 '12 at 08:00

score 1 · Answer 1 · answered Aug 16 '12 at 07:26

1

Yes you can add the "active" or "inactive" to your class when the link is clicked. On the onclick event of the links, you can use Jquery .addClass() function to add the "active" class and use .removeClass() to remove the "inactive" class

answered Aug 16 '12 at 07:26

Prabhuram

1,268
9
15

rahul · Accepted Answer · 2012-08-16T07:37:31.077

you can do it like this i have given your ul an id menu

    $('#menu li a').hover(
  function () {

$(this).addClass('active').removeClass('inactive');
  }, 
  function () {

    $(this).addClass('inactive').removeClass('active');
  }
);

Live Demo OnHover

if you want to do it on click use this

    $('#menu li a').click(
  function () {

$(this).addClass('active').removeClass('inactive');
      $('#menu li a').not(this).addClass('inactive').removeClass('active');
  }
);

Live Demo OnClick

jQuery - ScrollTo - focus menu on selected target

2 Answers2