嵌套的jQuery UI选项卡不能正确显示

我必须道歉，因为不能在jsFiddle中重现这一点（因为代码放置在2个文件中）。我得到了3个标签，其中正常工作，在第三个我加载另一个文件，其中包含2个选项卡。这些选项卡显示为大约400px高的渐变，并在下方显示这些选项卡的内容。这不是我想要的，就像你想象的那样:)它就像是灰色的标题，其中包含标签被拉伸到整个div ... 这里的图片： http://2i.cz/2i/t/954d3e14c7.jpg 正如你所看到的，标签本身就像地狱一样大，表格显示在下面。嵌套的jQuery UI选项卡不能正确显示

而且here's我的代码：

一号文件：

$(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>

来源

2013-03-11 Michal S

要减少灰色标签面板区域

？我认为它已经晚了，但希望它可以帮助其他人，如果他们有类似的想法。以下代码可能会有所帮助，可以减少标签面板的宽度。

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

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

来源

2013-10-26 07:44:35 teckysols

嵌套的jQuery UI选项卡不能正确显示

回答

相关问题