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

【问题标题】：Show another div on active tab in jQuery Tabs UI在 jQuery 选项卡 UI 的活动选项卡上显示另一个 div
【发布时间】：2011-03-12 16:28:38
【问题描述】：

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

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

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

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

4/26/11 以下答案有效

基本的 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>

【问题讨论】：

我错了。 ui.panel 是所选选项卡的
内容。道歉！我投票删除了我自己的帖子...
您能否发布您的 HTML，说明您如何包含 .extradiv？
在上面添加了 html。如何在 .extradiv 上切换 display:none 而不是显示/隐藏？

标签： jquery-ui-tabs show-hide

【解决方案1】：

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

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

【讨论】：

@songdogtech 这个jsfiddle 似乎在 ie9 和 FF 3.6 中运行良好。你的情况有何不同？
谢谢，它适用于 jsfiddle，你得到了正确的答案。我只是在我自己的 CSS 中没有看到不同的东西。以上问题从<div id="sidebar"> 到<div id="sidebar" class="widget"> 的一个小改动。如果有的话，会有多大的不同？
@songdogtech 添加 class="widget" 应该没有任何区别。当我添加它时，我的小提琴继续工作。我怀疑您的 exdiv 隐藏在其他东西后面或宽度和/或高度为零。 firebug 或 F12-developer 工具告诉你什么？
使其工作的关键是威廉在下面显示的 main 函数上方的额外调用：$('#sidebar .extradiv').hide(); 但您之前已经给出了答案。谢谢！

【解决方案2】：

Fred 的建议似乎奏效了。你可能错误地配置了你的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;
   }

【讨论】：

我无法让它在#tabs div 之外的 div class="extradiv" 上工作，即在#sidebar 内。并且：它应该切换显示：无而不是显示/隐藏？
如果你仔细看代码，div.extradiv 是在#tabs之外和#sidebar里面。显示/隐藏功能切换显示：无。
不知道我到底做错了什么，但现在可以了。 @Fred 的答案需要您包含的额外电话，$('#sidebar .extradiv').hide(); 谢谢！

【解决方案3】：

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

$('#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();
        }
    }
});

【讨论】：

内容高度比依赖于活动标签更好。我为 _some_fixed_height 使用什么样的值？像素？谢谢。
@songdogtech -- 是的，height 以像素为单位返回值：api.jquery.com/height
谢谢，但我的尝试没有运气，不管有没有 1000 in ();我在上面添加了代码。 - 标记

【解决方案4】：

这行得通：

在标签 3 上尝试查看红色 div

http://jsfiddle.net/Ln4L7/2/

【讨论】：