2

我正在使用 jQuery 选项卡作为界面。我希望我的主 div（选项卡覆盖）采用页面的尺寸。目前，它适用于覆盖，但选项卡的长度是自动的，并且与内容允许的一样小（没有异常或意外）。

所以简而言之，我的问题是：我如何使标签具有正确的尺寸？
我试过让它们变大，但它们似乎迫使叠加层变大，即使它们没有到达页面底部。

编辑：代码示例：

   <div id="a-tab-panel" class="ui-tabs-hide"> </div>
            <div id="tabs">
            <ul>
                    <li><a href="#tabs-1" class="tabStyle">Conférences</a></li>
                    <li><a href="#tabs-2" class="tabStyle">Annuaire</a></li>
                    <li><a href="#tabs-3" class="tabStyle">Statistiques</a></li>
            </ul>
                <div id="tabs-1">
                Content...
            </div>
            <div id="tabs-2" class="tabContentStyle">

                Content...

            </div>
            <div id="tabs-3" class="tabContentStyle">

                Content...

            </div>
    </div>
4

1 回答 1

3

假设您的选项卡水平排列：

更新示例：

<div id="tabs">
   <ul>
       <li><a href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3"><span>Three</span></a></li>
   </ul>
   <div id="fragment-1">
       <p>First tab is active by default:</p>
       <pre><code>$('#example').tabs();</code></pre>
   </div>
   ...
</div>

然后我们将所有标签的高度设置为最高标签的高度，在我的例子中是#fragment-1。

$("#tabs div.ui-tabs-panel").css('height', $("#fragment-1").height());

方法#2：

或者您可以使用EqualHeightsjQuery 插件根据内容自动设置选项卡的高度。

于 2012-05-30T15:24:03.027 回答