0

jsライブラリとしてjQueryUIを使用しています。
HTML

<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）の高さが異なるため、タブを切り替えるときにslideUpエフェクトとslideDownエフェクトを追加します。そのため、高さの違いはあまり表示されません。

Tab1（1000px）-> Tab12（800px）-> Tab3（1200px）

高さは上記のように変える必要があります。div（tab）全体をslideUpまたはSlideDownしたくありません。Tab1（1000px）-> Tab1（800px）。Tab1からTab2に切り替える場合、200pxはslideUPである必要があります。Tab2からTab3に切り替える場合、400pxはslideDownである必要があります。

どうすればいいですか？

ありがとう

4

2 に答える 2

1

domの準備ができたら、すべてのタブの高さをキャッシュし、「currentHeight」のようなグローバル変数を作成できます（最初にタブを表示しない場合、デフォルトは0です。それ以外の場合は、最初のタブの高さである必要があります）。次に、アンカータグのクリックイベントで、適切なタブの高さを取得し、currentHeightを減算します。結果が肯定的な場合は、別の結果にスライドダウンします。負の場合は、結果の絶対値までスライドアップします。もちろん、currentHeight変数を更新する必要があります。

于 2012-09-20T08:13:14.883 に答える
1

私はこれを適切にテストする機会がありませんでしたが、あなたはこれからアイデアを得ることができるはずです。currentHeightをグローバル変数として設定し、ページが読み込まれたときに、currentHeight変数をデフォルトまたは現在表示されているdivの高さに設定します。

いずれかのアンカータグをクリックすると、クリックされた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-20T09:18:25.850 に答える