최고의 접근 방식을 slideup 과 탭을 jQuery

Question

나는 페이지를 생성 이미지 상단에서,그리고 아래의 메뉴.를 클릭할 때에는 3 개의 menu 버튼 이미지 slideUp 고 페이지를 아래로 스크롤 그래서 메뉴에서 최고의 페이지,다음 오른쪽에 있습니다.콘텐츠 div 퇴색합니다.이 slideUp 만 일어나는 첫 번째 시간에서 사용자를 클릭의 버튼이 있습니다.

무엇을 절대 작업을 수행하는 가장 좋은 방법이 jQuery? (어떤 플러그인)

나는 방법을 알고 있어야 나는 그것을 막을 수 없다면 퇴색되는 페이지에서는 이미 보이면 클릭하여 같은 버튼을 두 번?

내가 사용하는 rel 대 href, 기 때문에,href 만든 페이지 점프,도 return false.

이것은 내가 지금까지:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    imgVisible = true;

    $('#mainmenu a').click(function(){
        var $activeTab = $(this).attr('rel');
        if(!imgVisible){
            $('html:not(:animated),body:not(:animated)').animate({scrollTop:$('#mainmenu').offset().top-20},500);
            $('.content').hide();
            $($activeTab).fadeIn();
        } else{
            $('#imgholder').slideUp(500,function(){
                imgVisible = false;
                $('#mainmenu a[rel="'+$activeTab+'"]').click();
            });
        }
        return false;
    });

});
</script>

<div id="imgholder"><img src="image.jpg" /></div>

<div id="mainmenu">
    <ul>
        <li><a rel="#tab1"></a></li>
        <li><a rel="#tab2"></a></li>
        <li><a rel="#tab3"></a></li>
    </ul>
</div>

<div id="container">

    <div class="content" id="tab1">
        content
    </div>


    <div class="content" id="tab2">
        content
    </div>


    <div class="content" id="tab3">
        content 
    </div>

</div>

Answer 1

다음 코드를 수행 할 필요가 무엇:

$('#mainmenu a').click(function(){  
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    $('#imgholder').slideUp(500,function(){         
        $('#'+myrel).fadeIn();
    });         
});

....
    <li><a href='#' rel='tab0'></a></li>

나는 제거'#'등에서 당신의 rel="조각;-)

나는 확실하지 않다 왜 당신이 원하는 것이 페이지가 스크롤.를 클릭할 때 메뉴에서,그/그녀는 이미 그것이 집중된다(그래서 그것은 눈에 보이는 안쪽에는 현재 뷰포).하지만 당신은 매우 큰 상단 이미지?이 경우에는,내가 알고 있고 수정할 것입니다 조각.(여전히,그것의 양에 따라 달라 콘텐츠를 아래의 메뉴에 눈에 보이는 페이지를 처음으로 로드할 때.)

또한,대 SEO 이유로 사용할 수 있습 href 대신 rel 특성을 별도로 만들어 콘텐츠를 들고 페이지입니다.다음 코드를 제거하는 것은 탐색 작업입니다.

$('#mainmenu a').each(function(){
    var myhref = $(this).attr('href');
    $(this).attr('href','#').attr('rel',myhref);
}).click(function(){
    var myrel=$(this).attr('rel');
    $('.content:not([id='+myrel+'])').hide();
    //....etc

Answer 2

나는 이것이 당신이 찾고있는 것의 좋은 예라고 생각합니다. 유기농 탭

Answer 3

var imgVisible = true;
var $activeTab, $lastTab;
var $mainmenu = $('#mainmenu');
var offset = $mainmenu.offset().top - 20;

$mainmenu.find('a').click(function() {

    $activeTab = $($(this).attr('rel'));

    if (!imgVisible) {
        // dont fire any events if already open
        if ($lastTab.attr('id') == $activeTab.attr('id')) return false;
        $lastTab.fadeOut('normal', function() {
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    } else {
        $('#imgholder').slideUp(500, function() {
            imgVisible = false;
            window.scrollTo(0, offset);
            $activeTab.fadeIn(500, function() {
                $lastTab = $activeTab;
            });
        });
    }

    return false;

});

추가하는 것이 좋습니다 <a href="#"> 이렇게하면 페이지가 올바르게 완료되면 페이지가 점프되지 않으며 앵커 링크에서 검증을 보장합니다. 누군가 내가 뭔가를 놓쳤다면 알려주고, 빨리 해결 될 수 있습니다 (또는 최적화 나 개선이 있으면 나를 위해 할 수 있습니다).