使用 slideUp 和 slideDown 切换 jQueryUI 选项卡

Posted 2023-05-09

【中文标题】使用 slideUp 和 slideDown 切换 jQueryUI 选项卡

【英文标题】：jQueryUI tabs switching with slideUp and slideDown

【发布时间】：2012-09-12 13:02:28

【问题描述】：

我使用 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应该是slideDown。

我该怎么做？

谢谢

【问题讨论】：

你知道最小的div高度是800px还是需要每次动态计算？

对不起，我误解了您既想向下滑动又想向上滑动。这些是您仅有的 3 个选项卡还是有很多选项卡。以及如何确定是要向上滑动还是向下滑动？即您希望标签 1 在单击时最多滑动 800 像素，但您希望标签 2 在单击时向下滑动到 1200 像素？

是的，这正是我想要的

我在下面的回答有帮助吗？

【参考方案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  );
  );
);

【参考方案2】：

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