Question

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

tabs-1包含少量文本，而其他选项卡2-4包含更多文本，因此这些选项卡 - 在激活时 - 延伸到页面的下方。我想做的是，当任何选项卡2到4处于活动状态时，能够在＃myotherdiv中添加更多内容的侧边栏。

因此，如果tab-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>

Answer 1

弗雷德的建议似乎有效。你可能错误配置了你的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 2

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

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

Answer 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();
        }
    }
});

Answer 4

这有效：

尝试在第3页上看到红色div

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

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

4 个答案: