在jQuery Tabs中的active选项卡上显示另一个div
在jQuery Tabs中的active选项卡上显示另一个div
提问于 2011-03-12 16:28:38
我想知道当jQuery UI tabs中的选项卡范围处于活动状态时，如何显示另一个div。
选项卡-1包含少量的文本，而其他的选项卡2-4包含的文本更多，因此这些标签-当激活时-延伸到页面下。我想要做的是，当任何选项卡2到4都处于活动状态时，能够使用#myotherdiv中的更多内容填充侧栏。
因此，如果选项卡-3是活动的，那么如何获得另一个div，即.extradiv在#侧栏中显示在#tabs div之外？
我是否用jQuery连接到该选项卡的活动状态以在#侧栏中显示.extradiv？另一种方式？
4/26/11工程下面的答案
Basic 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>回答 4
Stack Overflow用户
回答已采纳
发布于 2011-03-23 19:35:14
只有在动态加载选项卡时，load事件处理程序才会触发。使用show事件代替：
$('#tabs').tabs({
show: function (event, ui) {
var height = $(ui.panel).height();
if (height > 200) {
$('#sidebar .extradiv').show();
} else {
$('#sidebar .extradiv').hide();
}
}
});Stack Overflow用户
发布于 2011-03-21 10:35:41
弗雷德的建议似乎奏效了。你可能会错误地配置你的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;
}Stack Overflow用户
发布于 2011-03-12 16:42:20
添加load事件处理程序，并检查正在加载哪个选项卡(或选项卡的大小)，如果您想使它更动态的话。当选择该选项卡或选项卡大小超过某个阈值时，添加额外的内容。有关如何为Tab小部件添加事件处理程序的更多示例，请参见Tab 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();
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5283766
复制相关文章
相似问题
腾讯云开发者
