很难搜索或解释问题,但我会尝试
基本上我已经定义了 jquery 选项卡:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#Summary" title="Summary">Summary</a>
</li>
<li class="ui-state-default ui-corner-top"><a href="content.php?div=Products" title="Products">Products</a>
</li>
<li class="ui-state-default ui-corner-top"><a href="login.php" title="Login">Login</a>
</li>
</ul>
<div id="Summary" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="font-size: 85%;" align="center">
...
</div>
</div>
在摘要选项卡中,我定义了两个手风琴:
<td id="product_summary" valign="top" align="center">
<div id="release_info" style="display: block; width: 99%;" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
<h3>General Information</h3>
<div>
...
</div>
<h3>Description information</h3>
<div>
...
</div>
</div>
</td>
<td id="" style="width: 280px;" valign="top" style="overflow: hidden;">
<div id="controls" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
<h3 class="ui-accordion-header"><a href="#">Search</a></h3>
<div class="ui-accordion-content">
....
</div>
<h3 class="ui-accordion-header"><a href="#">Controls</a></h3>
<div>
...
</div>
</div>
</td>
在文件的开头,我将它们定义为:
$(function() {
$("#controls, #release_info").accordion({
active: 0,
heightStyle: "fill",
autoHeight: false,
navigation: true,
collapsible: true,
create: function(event, ui) { $("#controls, #release_info").show(); }
});
$('#controls').accordion({
width: 280,
});
$( "#tabs" ).tabs({
cache: true,
select: function(event, ui) {
window.location.hash = ui.tab.hash;
}
});
});
当我在摘要选项卡上加载页面时,手风琴定义的地方 - 一切都如预期的那样。但如果我在产品选项卡上(链接到 content.php)重新加载数据 - 只有第二个手风琴显示页面的全长。
正如您所看到的,我正在为选项卡使用缓存,所以我猜我应该在导航回摘要选项卡时以某种方式再次激活手风琴。Summary tab = index.php