jQueryを使用したスライドアップとタブへの最適なアプローチ

Question

上部に画像、下部にメニューを含むページを作成しています。ユーザーが3つのメニューボタンをクリックすると、画像がSlideUpになり、ページが下にスクロールしてメニューがページの上部になり、右側の.content divがフェードインします。ボタンをクリックします。

jQueryでこれを行うための絶対的な最良の方法は何ですか？（プラグインなし）

同じボタンを2回クリックしても、既に表示されているページがフェードインするのを防ぐことができない方法を知る必要がありますか？

href ではなく rel を使用しています。これは、 return false であってもhrefがページをジャンプさせるためです。

これは私がこれまでに持っているものです：

<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 の理由から、rel属性の代わりにhrefを使用することもできます。ページを保持する個別のコンテンツを作成します。次のスニペットは、ナビゲーションアクションを削除します。

$('#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="#">を追加することを強くお勧めします。これにより、適切に完了してもページがジャンプせず、アンカーリンクの検証が保証されます。誰かが私が何かを見逃したかどうか私に知らせて、それはすぐに解決することができます（または最適化または改善があれば私のためにそれをすることができます）。