Bester Ansatz slideup und Tabs mit jQuery

Question

Ich erstelle eine Seite mit einem Bild an der Spitze, und ein Menü unten. Wenn der Benutzer auf der 3 Menütasten auf klickt, unten das Bild slideUp und die Seite scrollt so das Menü am oberen Rand der Seite, dann schwindet die richtige .content div in. Die slideUp nur der Benutzer das erste Mal passieren soll Klicks auf den Tasten.

Was ist der absolute beste Weg, dies mit jQuery zu tun? (keine Plugins)

Ich muß auch wissen, wie ich es nicht verhindern kann, auf der Seite zu verblassen, die bereits sichtbar ist, wenn ich zweimal die gleiche Taste klicken?

Ich bin mit rel statt href , da die href die Seiten gemacht, auch mit return false .

Das ist, was ich habe, so weit:

<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

Der folgende Code erreicht, was Sie brauchen:

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

Ich habe das Zeichen '#' von Ihrem rel = '' Stück entfernt; -)

Ich bin nicht sicher, warum Sie die Seite blättern wollen. Wenn ein Benutzer auf das Menü klickt, wird er / sie hat schon darauf fokussiert (so ist es in der aktuellen Ansichtsfenster sichtbar). Aber haben Sie ein sehr großes Bild oben? Wenn das der Fall ist, lassen Sie mich wissen und ich werde das Snippet ändern. (Still, es hängt von der Menge des Inhalts unter dem Menü sichtbar, wenn die Seite geladen wird.)

Auch für SEO Gründe möchten Sie vielleicht die href anstelle des rel-Attribut verwenden, und erstellen Sie separate Content-Halte Seiten. Der folgende Ausschnitt würde die Navigationsaktion entfernen.

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

Ich denke, dies ist ein gutes Beispiel dafür, was Sie suchen: 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;

});

ich sehr empfehlen <a href="#"> als diese Zugabe nicht die Seiten machen, wenn es richtig gemacht und wird die Validierung auf dem Anker-Links zu gewährleisten. Jemand lassen Sie mich wissen, wenn ich etwas verpasst, kann es schnell gelöst werden (oder man kann es für mich tun, wenn Sie eine Optimierung oder Verbesserung haben).