jQuery로 divs 숨기기 및 표시

기본적으로 3 개의 옵션과 3 개의 div가있는 설정 메뉴가 있습니다.이 중 2 개는 기본적으로 숨겨져 있습니다. 모든 것은 첫 번째 클릭에서 잘 작동하고, 올바른 div를 숨기고 현재 div에서 활성 클래스를 제거하고 클릭 한 div에 추가하면서 올바른 div를 표시합니다. 그러나 내가 다른 링크를 다시 클릭하면, 그것은 올바른 div 아래로 미끄러지지만 다른 열린 div 위로 미끄러지지 않습니다. 나는 붙어있다.jQuery로 divs 숨기기 및 표시

코드 :

HTML :

<ul class="nav nav-pills"> 
     <li class="settingLink active" data-tab="general"><a href="#">General</a></li> 
     <li class="settingLink" data-tab="social" ><a href="#">Social</a></li> 
     <li class="settingLink" data-tab="captcha"><a href="#">Captcha</a></li> 
    </ul>

div의 :

<div id="generalSettings"> 
</div> 
<div id="socialSettings"> 
</div> 
<div id="captchaSettings"> 
</div>

JS :

function settingMenu(event) 
{ 
$('.settingLink').bind('click', function(){ 
    //The tab value of the currently clicked element 
    var tab = $(this).data('tab'); 
    //Current active element 
    var current = $('.active, .settingLink').data('tab'); 

    //Slide the old div up 
    $('#'+current+'Settings').slideUp('fast', function(){ 
     //Slide the new div down 
     $('#'+tab+'Settings').slideDown(); 
    }); 

    //Remove active class from current link 
    $('.active, .settingLink').removeClass('active'); 
    //Add active class to new link 
    $(this).addClass('active'); 

}); 
}

사전에 감사합니다!

출처

2012-10-24 user1701398

BTW이

$('.active.settingLink')

선택을 시도 - 그것은 클릭를 연결하는 좋은 형태입니다 LI가 아닌 A- 태그에. –

만약 내가 잘못하지 않았다면이 줄은 currentCliked를 현재 오른쪽에 저장하고자하는 것처럼 보입니다. 이 두 클래스가있는 경우 다음 선택은

var current = $('.active, .settingLink').data('tab');

은 또한 더 나은 연습 이벤트 핸들러를 할당하는 대신 함수를 호출하는

Check FIDDLE

var current = $('.active.settingLink').data('tab');

해야한다 ... 잘못 함수를 여러 번 호출하면 이벤트 핸들러가 복제 될 수 있기 때문입니다. 대신 리튬의

출처

2012-10-24 20:00:14

$ ('. nav-pills li.active')도 작동합니다. –

고맙습니다! – user1701398

다행 :) –

없음 쉼표의 앵커에 이벤트를 연결 대신

$('.active, .settingLink')

의

출처

2012-10-24 20:05:56 AnandVeeramani

jQuery로 divs 숨기기 및 표시

답변

관련 문제