Meilleure approche pour faire glisser les onglets avec jQuery

Question

Je crée une page avec une image en haut et un menu ci-dessous. Lorsque l'utilisateur clique sur l'un des 3 boutons de menu, l'image slideUp et la page défilent vers le bas pour que le menu se trouve en haut de la page, puis la division .content de droite apparaît en fondu. Le slideUp ne doit apparaître que la première fois que l'utilisateur clique sur les boutons.

Quel est le meilleur moyen absolu de faire cela avec jQuery? (pas de plugins)

J'ai également besoin de savoir comment je ne peux pas l'empêcher de disparaître dans la page déjà visible si je clique deux fois sur le même bouton?

J'utilise rel à la place de href , car href a fait sauter la page, même avec return false .

C'est ce que j'ai jusqu'à présent:

<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

Le code suivant répond à vos besoins:

$('#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>

J'ai retiré le signe '#' de votre pièce rel = ''; -)

Je ne sais pas pourquoi vous voudriez faire défiler la page. Lorsqu'un utilisateur clique sur le menu, il l'a déjà mis au point (il est donc visible dans la fenêtre actuelle). Mais avez-vous une très grande image supérieure? Si tel est le cas, faites-le moi savoir et je modifierai l'extrait de code. (Cela dépend néanmoins de la quantité de contenu située sous le menu, visible lors du premier chargement de la page.)

De même, pour les référencement , vous pouvez utiliser le href au lieu de l'attribut rel et créer des pages de contenu séparées. L'extrait suivant supprimera l'action de navigation.

$('#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

Je pense que c'est un excellent exemple de ce que vous recherchez: Onglets organiques

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;

});

Je suggère fortement d'ajouter <a href="#"> car cela ne fera pas sauter la page correctement et assurera la validation de vos liens d'ancrage. Quelqu'un me dit si quelque chose me manque, cela peut être résolu rapidement (ou vous pouvez le faire pour moi si vous avez une optimisation ou une amélioration).