jquery-ui - 调整 jQuery 选项卡面板的大小

Question

)

我正在使用 jQuery 选项卡，我喜欢选项卡向左对齐的方式，顶部橙色部分占分配宽度的 100%。但是当我点击选项卡时，下拉面板只有一半页面的信息。

如何调整面板大小以使所有面板仅占页面的一半？

Answer 1

您可以简单地将类样式添加到每个可显示的选项卡内容并限制其高度。

<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" class="tabview">
        Tab1 content
    </div>
    <div id="fragment-2" class="tabview">
        Tab2 content
    </div>
    <div id="fragment-3" class="tabview">
        Tab3 content
    </div>
</div>

以及必要时还显示滚动条的 CSS 样式：

.tabview {
    height: 50px;
    overflow: auto;
}  

这是工作的 JSFiddle：http: //jsfiddle.net/Fhhu5/