嵌套的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選項卡不能正確顯示

回答

相關問題