jQueryUI製表符切換slideUp和slideDown

我使用jQueryUI作爲我的js庫。
HTMLjQueryUI製表符切換slideUp和slideDown

<ul> 

     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1" style="height:1000px;"> </div> 
    <div id="fragment-2" style="height:800px;"></div> 
    <div id="fragment-3" style="height:1200px;"></div>

jQuery的

<script> 
    $(document).ready(function() { 
    $("#container").tabs(
    { 
     fx: {opacity: 'toggle' } 
    } 
    ); 
    }); 
    </script>

由於我的標籤（div的）是具有不同的高度我想切換標籤時添加效果基本show和了slideDown效果。所以不同的高度不會顯示太多。

TAB1（1000像素） - > Tab12（800像素） - > TAB3（1200像素）

高度應能變化等的上方。我不想slideUp或SlideDown整個div（標籤）。 Tab1（1000px） - > Tab1（800px）。當從Tab1切換到Tab2時，200px應該是slideUP。當從Tab2切換到Tab3時，400px應該是slideDown。

我該怎麼辦？

感謝

來源

2012-09-20 Techie

你知道最小的div高度是800px還是你需要每次動態計算一次？ –

我知道它是800px – Techie

對不起，我誤解了你想滑下去。這些是您擁有的唯一3個標籤還是有很多。你如何確定你想要向上還是向下？即您希望選項卡1在單擊時最多滑動到800像素，但您希望選項卡2在單擊時滑動到1200像素？ –

我還沒有機會正確地測試這個，但你應該能夠從中得到一個想法。將currentHeight設置爲全局變量，然後在頁面加載時將currentHeight變量設置爲默認或當前可見div的高度。

Onclick的任何一個錨標籤運行一個函數來獲取點擊的div的高度，然後使用currentHeight變量來檢查差異。然後從新的div的高度減去這個差值，併爲這個新的高度設置動畫。在此示例中，將currentHeight全局變量設置爲新div高度非常重要，然後再進行動畫設置（更改其高度），否則下次單擊某個選項卡時計算不起作用。

var currentHeight = 0; 

$(document).ready(function(){ 
    currentHeight = $('#fragment-1').height(); 
}); 

$(document).ready(function(){ 
    $('a[href*="#fragment"]').click(function(){ 

     var divID = $(this).attr('href'); 
     var heightDiff = $(divID).height() - currentHeight; 
     var newHeight = $(divID).height() - heightDiff; 
     currentHeight = $(divID).height(); 
     $(divID).animate({ height:newHeight }); 
    }); 
});

來源

2012-09-20 09:18:25

可以緩存所有選項卡的高度時，DOM就緒，創建一個名爲類似「currentHeight」全球varibale（默認爲0，如果你不顯示任何初始選項卡，否則它應該是初始選項卡的高度），然後在錨標籤的單擊事件中，可以獲取相應選項卡的高度，然後減去currentHeight。如果結果是肯定的，則滑動到不同的位置。如果它是負值，請將其上拉至結果的絕對值。那麼當然，你必須更新currentHeight變量。

來源

2012-09-20 08:13:14 Rorchackh

jQueryUI製表符切換slideUp和slideDown

回答

相關問題