2

很难搜索或解释问题,但我会尝试

基本上我已经定义了 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

4

2 回答 2

1

不再需要答案

该问题是由第 3 方 colResizable 插件引起的。删除它可以解决问题。

于 2013-07-22T12:24:50.290 回答
0

首先制作标签

$("#tabs").tabs();

然后在标签中制作手风琴

 $("#" + accordionID).accordion();

然后它会工作

于 2013-07-26T10:06:14.903 回答