jQuery的幻燈片和標籤的最佳方法

Question

我正在創建一個頁面頂部的圖像和下面的菜單。當用戶點擊3個菜單按鈕時，圖像上移和頁面向下滾動，菜單位於頁面頂部，然後右側.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="#">因爲這如果使用得當，將確保您的錨鏈接驗證不會使頁面跳轉。有人告訴我，如果我錯過了一些東西，它可以很快得到解決（或者如果你有一個優化或改進，你可以爲我做這件事）。