Question

我必须为首先无法在jsFiddle中重现这一点而道歉（因为代码放在2个文件中）。我有3个选项卡工作正常，在第三个我加载另一个包含2个选项卡的文件。这些选项卡显示为大约400px高的渐变，其下方显示的是这些选项卡的内容。这不是我想要的，你可以想象:)就像灰色的标题，其中包含的标签被拉伸到整个div ... 这是图片： http://2i.cz/2i/t/954d3e14c7.jpg 如您所见，标签本身很大，因为地狱和桌子显示在下面。

这是我的代码：

第一档：

$(function() {
      $( "#tabs" ).tabs();
});

$("#detail").load('./safe/kalkulace_grafy_all.php?k_polozka=<? echo $co; ?>&cu=<? echo $ids; ?>');

<div id="tabs">
    <ul>
            <li><a href="#tabs-1">Info</a></li>
            <li><a href="#tabs-2">Info2</a></li>
            <li><a href="#tabs-3">Info3</a></li>
    </ul>
    <div id="tabs-1" class="detail_ceny_tab" style="height: 446px;"></div>
    <div id="tabs-2" class="detail_ceny_tab" style="height: 446px;"></div>
    <div id="tabs-3" class="detail_ceny_tab" style="height: 446px;">
        <div id="detail"></div>
    </div>
</div>

第二档：

    $(function() {
      $( "#subTabs" ).tabs();
    });

    $("#subTab1").load('./safe/kalkulace_kalkVzorec.php?k_polozka=<? echo $k_polozka; ?>&cu='+cu);

<div id="subTabs" style="margin-left:500px">
    <ul>
        <li><a href="#subTab1">Kalkulační vzorec</a></li>
        <li><a href="#subTab2">Seznam potřeb</a></li>
    </ul>
    <div id="subTab1"> </div>
    <div id="subTab2"> </div>
</div>

Answer 1

您想减少灰色标签面板区域吗？我认为它已经很晚了，但希望如果他们有类似的东西可以帮助其他人。以下代码可能会有所帮助，您可以减小选项卡面板的宽度。

$( "#subTabs" ).find( ".ui-tabs-nav").css('width', '50%');

$( "#subTabs" ).find( ".ui-tabs-panel").each( function( index, element ){
    $( this ).css('width', '50%');
});

嵌套的jQuery UI选项卡无法正确显示

1 个答案: