Проблема с добавлением / удалением класса в jquery

Question

Я пытаюсь создать меню навигации, похожее на вкладки, но с вертикальными кнопками. Когда я запускаю страницу, первый класс li удаляется, и когда я нажимаю любую другую ссылку, происходит нечто другое, чем показывается мой div содержимого. .

Первая ссылка всегда должна быть активной при запуске страницы.

<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>

Не уверен, что мне здесь не хватает .. Может быть, потому что я только что проснулся и все еще на моей первой чашке кофе ..;)

Answer 1

вы добавляете «активный» класс к элементу A

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

Я думаю, вы хотите добавить его к элементу LI, поэтому либо вы добавляете

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

или вы регистрируете onclick на элементе LI

Answer 2

Вы добавляете класс в элемент <a>, но удаляете его из родительского элемента <li>.

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

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

Похоже, вы собираетесь <li> иметь класс. Так что вы бы сделали это вместо:

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

Или, если вы не возражаете, я добавляю немного DOM API в:

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

А теперь иди и пополни! ; О)