Лучший подход к слайду и вкладкам с jQuery

Question

Я создаю страницу с изображением вверху и меню ниже. Когда пользователь нажимает на 3 кнопки меню, изображение slideUp и страница прокручиваются вниз, поэтому меню находится в верхней части страницы, затем загорается правый .content div. SlideUp должен выполняться только в первый раз, когда пользователь нажимает кнопки.

Какой абсолютный лучший способ сделать это с помощью jQuery? (без плагинов)

мне нужно знать, как я не могу предотвратить это, чтобы исчезнуть на странице, которая уже видна, если я нажмите на ту же кнопку дважды?

Я использую отн вместо HREF, так как 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 причинам вы можете использовать href вместо атрибута rel и создавать отдельные страницы содержания. Следующий фрагмент удалит действие навигации.

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

Я думаю, что это отличный пример того, что ищете: 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; 

}); 

Я настоятельно рекомендую добавлять <a href="#"> как это не сделает прыжок страницы, если все сделано правильно и обеспечит проверку на якорь ссылки. Кто-то дал мне знать, если я что-то пропустил, его можно быстро решить (или вы можете сделать это для меня, если у вас есть оптимизация или улучшение).