Jquery에 대한 영향

Question

이 이미지에서와 같은 작업을하려고하는데 메뉴에서 다른 항목을 선택하면 기본 콘텐츠가 올라갑니다.

내가, 내가,이 같은 탭이있는 웹 사이트의 동일한 개념을 사용하고이 작업을 수행하는 방법을 특정 방법에 알고 : 나는 효과가 무엇인지 알고 싶어

$(function(){ 
       $("#content:First").show(); 
       $("#wrap a").click(function(){ 
        $(".aba").hide(); 
        var div = $(this).attr('href'); 
        $(div).fadeIn('slow'); 
        $('#menu li').css('background', '#03c0f3'); 
        $(this).parent('li').css('background', '#2ADAF1'); 

        return false; 
       }); 

을 그 div ($ (div))에 적용하여 이와 같이되거나 더 나은 방법이 있다면 가능합니다.

Answer 1

@ d3c0y의 아이디어와 마찬가지로 스크롤 가능한 콘텐츠로 만들고 click()의 콘텐츠로 슬라이드하면 어떨까요?

$('nav a').click(function (e) { 
    e.preventDefault(); 
    var div = $(this).attr('href'), 
     //get the contents offset top position 
     offsetTop = $(div).offset().top; 
    //animate scrolling to the contents 
    $('body, html').animate({ 
     scrollTop: offsetTop 
    }, 'slow'); 
}); 

당신은 또한 fadeTo()를 사용하여 일부 페이딩 효과를 적용 할 수 있습니다 : 당신이 body {overflow:hidden;}을 좋아하는 경우에

$(div).fadeTo('slow', 1).siblings().fadeTo('slow', 0); 

당신은 또한 스크롤 막대를 제거 할 수 있습니다, 스크롤/고정은 여전히 ​​작동합니다.

이 부분은 jsfiddle을 참조하십시오.

Answer 2

필요에 맞는 미리 정의 된 기능이 있다고 생각하지 않습니다. .animate()을 사용하여 직접 제작해야합니다. 그것은 다음과 비슷한 모습이 될 것입니다

$('#navigation a').click(function(){ 
    $('#content').css({ 
     position : 'absolute', 
     top : 0, 
     left : 0 
    }).animate({ 
     top : -$('#content').height() - 1 
    }, 250, function(){ 
     // Change content here 
     // Animate it back 
    }); 
}); 

또는 다른 많은 사이트가 사용하고있는, 한 페이지에 전체 내용을 제공 할 수 있습니다 각각 (example)를 스크롤합니다. 이를 위해서는 this one과 같은 다른 플러그인을 살펴보십시오.