0

そもそもjsFiddleでこれを再現できなかったことをお詫びしなければなりません（2つのファイルにコードが配置されているため）。正常に動作する3つのタブを取得し、3番目に2つのタブを含む別のファイルをロードします。これらのタブは、その下に表示されているこれらのタブのコンテンツとともに、約400pxの高グラデーションとして表示されます。あなたが想像できるように、これは私が望んでいたものではありません:)それはタブを含む灰色のヘッダーがdiv全体に引き伸ばされたようなものです...これが写真です：http： //2i.cz/2i/ t / 954d3e14c7.jpgご覧 のとおり、タブ自体は地獄のように大きく、下に表が表示されています。

そして、これが私のコードです：

1番目のファイル：

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

2番目のファイル：

    $(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 に答える