Question

Guys Im just stuck in this, Giving an active class. its just simply not working for me – I will show the code, it may let you help me faster. I know the Jquery logic behind the theory but in practical its just NOT done anyway. Thats the reason I came over to ask that.
Its there on http://jsfiddle.net/j08691/dZ9KP/12/ .

<div id="MainContainer">
  <ul id="MainNav">
    <li> <a href="#page1">   title 1  </a>     </li>
    <li>    <a  href="#page2">  title 2 </a>     </li>                
  </ul>
  <div id="MainContent">
    <div class="MainContentEach" id="page1">
      title 1 content
    </div>
    <div class="MainContentEach" id="page2">
      title 2 content
    </div>
  </div>
</div>

JS

     $(function () {
        $('#MainNav a').click(function () {
        pageId = $(this).attr('href');
        num = $('#MainNav a').index(this);
        $(pageId).parent().animate({ scrollTop: (500 * num) }, 'slow');
        });
      });

Any help would be appreciated.

Answer 1

If you only need to add a class called active to the <a> tag when its clicked you could do something like this:

$(function () {
    $('#MainNav a').click(function () {
         pageId = $(this).attr('href');
         num = $('#MainNav a').index(this);
         $(pageId).parent().animate({ scrollTop: (500 * num) }, 'slow');

         $('#MainNav a').each(function () {
             if ($(this).hasClass('active')) {
                 $(this).removeClass('active');
             }
         });

         if (!$(this).hasClass('active')) {
             $(this).addClass('active');
         }
    });
});

This will add a class called active your <a> tag, keep in mind this class will need to be defined in your stylesheet.