在 jQuery 选项卡 UI 中的活动选项卡上显示另一个 div

Question

我想知道当 jQuery UI 选项卡中的一系列选项卡处于活动状态时如何显示另一个 div。

tabs-1 包含少量文本，而其他选项卡 2-4 包含更多文本，因此这些选项卡（当处于活动状态时）会延伸至页面下方。我想要做的是，当选项卡 2 到 4 中的任何一个处于活动状态时，能够在 #myotherdiv 中填充更多内容。

因此，如果 tabs-3 处于活动状态，我如何才能获得另一个 div，即 .extradiv 以显示在 #sidebar 中的 #tabs div 之外？

我是否使用 jQuery 挂接到选项卡的活动状态以在 #sidebar 中显示 .extradiv ？还有其他方法吗？

2011 年 4 月 26 日答案如下

基本 jQuery UI 选项卡结构

<div id="tabs">
<ul>
<li><a href="#tabs-1"></a></li>
<li><a href="#tabs-2"></a></li>
<li><a href="#tabs-3"></a></li>
<li><a href="#tabs-4"></a></li>
</ul>

<div id="tabs-1">
"short" content
</div>

<div id="tabs-2">
"long" content
</div>

<div id="tabs-3">
"long" content
</div>

<div id="tabs-4">
"long" content
</div>

</div>

侧边栏

<div id="sidebar" class="widget">

<div class="extradiv">content</div>

</div>

Answer 1

load 事件处理程序仅在动态加载选项卡时触发。请改用 show 事件：

    $('#tabs').tabs({
        show: function (event, ui) {
            var height = $(ui.panel).height();
            if (height > 200) {
                $('#sidebar .extradiv').show();
            } else {
                $('#sidebar .extradiv').hide();
            }
        }
    });

Answer 2

弗雷德的建议似乎有效。你可能错误配置了你的CSS？请参阅此处的演示：http://jsbin.com/ateru6/5

您可以在此处查看源代码: http://jsbin.com/ateru6/5/edit

JavaScript:

$('#sidebar .extradiv').hide();

$tabs = $('#tabs').tabs({
  show: function(event,ui) {
        var height = $(ui.panel).height();
        $('#tabHeight').html(height);
        if (height > 200) {
           $('#sidebar .extradiv').show();
        }
        else {
           $('#sidebar .extradiv').hide();
        }
    }
});

CSS:

  #tabs
  {
    width: 400px;
    margin-left: 6em;
  }

  #sidebar
  {
    position: fixed;
    top: 1em;
    left: 0;
    width: 5em;
    border: 2px solid gray;
    padding: 0.5em;
  }

  #sidebar .extradiv
  {
    color: blue;
  }

  #tabHeight
  {
    overflow: hidden;
    color: red;
    text-overflow: ellipsis;
   }

Answer 3

如果您想让它更加动态，请添加 load 事件处理程序并检查正在加载哪个选项卡（或选项卡的大小）。当选择该选项卡或选项卡大小超过特定阈值时添加额外内容。有关如何为 Tab 小部件添加事件处理程序的更多示例，请参阅 jQuery UI 站点上的文档。

$('#tabs').tabs({
    ...
    load: function(event,ui) {
        var height = $(ui.panel).height();
        if (height > _some_fixed_height) {
           $('.sidebar .extra_content').show();
        }
        else {
           $('.sidebar .extra_content').hide();
        }
    }
});

Answer 4

这有效：

当您进入选项卡 3

http://jsfiddle.net/Ln4L7/2 时尝试查看红色 div /