Il miglior approccio a slideup e schede con jQuery

Question

Sto creando una pagina con un'immagine in alto e un menu in basso. Quando l'utente fa clic sui 3 pulsanti del menu, l'immagine slideUp e la pagina scorre verso il basso in modo che il menu si trovi nella parte superiore della pagina, quindi il div .content giusto si dissolve. Lo slideUp dovrebbe avvenire solo la prima volta che l'utente clic sui pulsanti.

Qual è il modo migliore in assoluto per farlo con jQuery? (nessun plugin)

Devo anche sapere come non posso impedirgli di svanire nella pagina che è già visibile se faccio clic due volte sullo stesso pulsante?

Sto usando rel invece di href , poiché href ha fatto saltare la pagina, anche con return false .

Questo è quello che ho finora:

<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

Il seguente codice soddisfa ciò di cui hai bisogno:

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

Ho rimosso il segno '#' dal tuo pezzo rel = '' ;-)

Non sono sicuro del motivo per cui si desidera scorrere la pagina. Quando un utente fa clic sul menu, lo ha già focalizzato (quindi è visibile all'interno della finestra corrente). Ma hai un'immagine superiore molto grande? In tal caso, fammi sapere e modificherò lo snippet. (Tuttavia, dipende dalla quantità di contenuto sotto il menu visibile al primo caricamento della pagina.)

Inoltre, per SEO motivi per cui potresti voler utilizzare l'href invece dell'attributo rel e creare pagine di contenuto separate. Il frammento seguente rimuove l'azione di navigazione.

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

Penso che questo sia un ottimo esempio di ciò che stai cercando: Organic Tabs

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;

});

Consiglio vivamente di aggiungere <a href="#"> in quanto ciò non farà saltare la pagina se eseguita correttamente e garantirà la convalida sui collegamenti di ancoraggio. Qualcuno mi faccia sapere se ho perso qualcosa, può essere risolto rapidamente (o puoi farlo per me se hai un'ottimizzazione o un miglioramento).