0

我必须为无法在 jsFiddle 中重现这一点而道歉（因为代码放在 2 个文件中）。我有 3 个工作正常的选项卡，在第三个中我加载了另一个包含 2 个选项卡的文件。这些选项卡显示为大约 400 像素高的渐变，这些选项卡的内容显示在它们下方。这不是我想要的，你可以想象 :) 它就像灰色标题，其中包含选项卡被拉伸到整个 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>
4

1 回答 1

0

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

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

$( "#subTabs" ).find( ".ui-tabs-panel").each( function( index, element ){
    $( this ).css('width', '50%');
});
于 2013-10-26T07:44:35.687 回答