jQuery는 여러 개의 활성 상태로 전환합니다.

Question

콘텐츠 토글에 대한 도움을 주시면 감사하겠습니다.

현재 콘텐츠를 전환하는 탭이 2 개 있습니다. 한 번에 하나의 초점으로 설정해야하고 선택한 .content-drawer이 표시 될 때 추가 활성 클래스가 추가되어야합니다.

단일 탭을 작동 할 때 아래의 노력이 효과가 있지만 작동 상태는 잘못된 상태에서 : 표시 조건이 실행되는 것과 같이 상태를 전환 할 때 작동하지 않습니다.

누군가 올바른 방향으로 나를 가리킬 수 있습니까? 여기에 내 현재 jsfiddle

$('.content-drawer').hide(); 

    $('.tab').click(function() { 
     var target = $(this.rel); 
      $('.content-drawer').not(target).slideUp(); 
      target.delay(500).slideToggle(); 
      $('.tabs > li.focus').removeClass('focus'); 
      $(this).parent().addClass('active focus'); 

    if ($('.content-drawer:visible').length) { 
     $('.tabs > li.active').removeClass('active'); 
    } 
    return false; 
});​ 


<ul class="tabs"> 
    <li class="focus"> 
     <a href="#" rel="#calc" class="tab"><i class="icon-plus"></i>Calculator</a> 
    </li> 
    <li> 
     <a href="#" rel="#info" class="tab"><i class="icon-info"></i>Info</a> 
    </li> 
</ul> 

<div class="content-drawer" id="calc"> 
    <p>Calc Content</p>  
</div> 
<div class="content-drawer" id="info"> 
    <p>Info Content</p>  
</div> 

Answer 1

내가 완전히 문제가 무엇인지 이해하지있어이 ​​코드

$('.content-drawer').hide(); 

$('.tab').click(function() { 
    var $this = $(this); 
    var target = $(this.rel); 
    $this.closest('li').addClass('active focus'); 
    // Add the classes to the closest li of the clicked anchor 
    $('.tab').not($this).closest('li').removeClass('active focus'); 
    // Remove the classes for the non-clicked items 
    $('.content-drawer').not(target).slideUp(); 
    // Slideup the other contents 
    target.delay(500).slideToggle(); 
    // Toggle the current content 
    if (target.is(':visible')) { 
     // Only if the target is visible remove the active class 
     $this.closest('li').removeClass('active'); 
    } 
    return false; 
});​ 

Check Fiddle