Question

I am trying to create a menu navigation sort of like tab’s but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div’s being shown..

The first link should always be active on page start.

<script type="text/javascript">
$(document).ready(function() {

    var tabContainers = $('div.pages > div');

    $('div.sidemenu ul.list a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.sidemenu ul.list li').removeClass('active');
        $(this).addClass('active');

        return false;
    }).filter(':first').click();


});
</script>
<div class="sidemenu">
  <ul class="list"> 
 <li class="active"><a href="#first">Login & Password</a></li>
 <li><a href="#second">Contact Details</a></li>
 <li><a href="#third">Company & Branch Details</a></li>
 <li><a href="#forth">Address Details</a></li>
  </ul>
</div>

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="second">
    CONTENT 2
  </div>
  <div id="third">
    CONTENT 3
  </div>
  <div id="forth">
    CONTENT 4
  </div>
</div>

Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. 😉

Answer 1

You’re adding the class to the <a> element, but removing it from its parent <li> element.

$(this).addClass('active');  // "this" is the <a> that received the event

   // This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');

Looks like you intend for the <li> to have the class. So you’d do this instead:

$(this).parent().addClass('active');

Or if you don’t mind me mixing a little DOM API in:

$(this.parentNode).addClass('active');

Now go get a refill! ;o)