调整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/