0

我使用 jQueryUI 作为我的 js 库。
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）具有不同的高度，我想在切换标签时添加上滑和下滑效果。所以高度差异不会显示太多。

Tab1(1000px) -> Tab12(800px) -> Tab3(1200px)

高度应该像上面一样变化。我不想滑动或向下滑动整个 div（标签）。Tab1（1000 像素）-> Tab1（800 像素）。从 Tab1 切换到 Tab2 时 200px 应该是 slideUP。从 Tab2 切换到 Tab3 时 400px 应该是向下滑动的。

我该怎么做？

谢谢

4

2 回答 2

1

您可以在 dom 准备好时缓存所有选项卡的高度，创建一个名为“currentHeight”之类的全局变量（如果您最初没有显示任何选项卡，则默认为 0，否则它应该是初始选项卡的高度），然后在锚标签的点击事件上，可以抓取相应标签的高度，减去当前高度。如果结果是肯定的，请向下滑动到那个不同的位置。如果为负数，则向上滑动到结果的绝对值。那么当然，您必须更新 currentHeight 变量。

于 2012-09-20T08:13:14.883 回答
1

我还没有机会对此进行正确测试，但您应该能够从中得到一个想法。将 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-20T09:18:25.850 回答