Question

我正在使用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）具有不同的高度，我想在切换标签时添加slideUp和slideDown效果。所以不同的高度不会太多。

Tab1（1000px） - ＆gt; Tab12（800px） - ＆gt; TAB3（1200像素）

高度应该如上所述。我不想幻灯片或SlideDown整个div（标签）。 Tab1（1000px） - ＆gt; TAB1（800像素）。当从Tab1切换到Tab2时200px应该是slideUP。当从Tab2切换到Tab3时，400px应该是slideDown。

我该怎么做？

由于

Answer 1

你可以在dom准备就绪时缓存所有标签的高度，创建一个名为'currentHeight'的全局变量（如果你最初没有显示任何标签，则默认为0，否则它应该是初始的高度） tab），然后在锚标签的click事件上，你可以抓住相应标签的高度，减去currentHeight。如果结果为正，则将slideDown设置为不同。如果是负数，则滑动到结果的绝对值。当然，你必须更新currentHeight变量。

Answer 2

我没有机会正确测试这个，但你应该能够从中得到一个想法。将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 } );
  });
});

使用slideUp和slideDown切换jQueryUI标签

2 个答案: