El mejor enfoque para deslizar y pestañas con jQuery

Question

Estoy creando una página con una imagen en la parte superior y un menú a continuación. Cuando el usuario hace clic en uno de los 3 botones de menú, la imagen se desliza hacia arriba y la página se desplaza hacia abajo para que el menú se encuentre en la parte superior de la página, luego la división de contenido derecha se desvanece. La deslización hacia arriba solo debe ocurrir la primera vez que el usuario clics en los botones.

¿Cuál es la mejor manera absoluta de hacer esto con jQuery? (sin complementos)

¿También necesito saber cómo no puedo evitar que se desvanezca en la página que ya está visible si hago clic dos veces en el mismo botón?

Estoy usando rel en lugar de href , ya que href hizo saltar la página, incluso con return false .

Esto es lo que tengo hasta ahora:

<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

El siguiente código logra lo que necesita:

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

He eliminado el signo '#' de su pieza rel = '' ;-)

No estoy seguro de por qué querría desplazarse por la página. Cuando un usuario hace clic en el menú, él / ella ya lo tiene enfocado (por lo que es visible dentro de la ventana gráfica actual). ¿Pero tienes una imagen superior muy grande? Si ese es el caso, avíseme y modificaré el fragmento. (Aún así, depende de la cantidad de contenido debajo del menú visible cuando se carga la página por primera vez).

Además, por SEO , es posible que desee utilizar el href en lugar del atributo rel y crear contenido separado con páginas. El siguiente fragmento eliminaría la acción de navegación.

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

Creo que este es un gran ejemplo de lo que está buscando: Pestañas orgánicas

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;

});

Le recomiendo agregar <a href="#"> ya que esto no hará que la página salte cuando se realice correctamente y garantizará la validación de sus enlaces de anclaje. Alguien me avise si me perdí algo, se puede resolver rápidamente (o puede hacerlo por mí si tiene una optimización o mejora).