如何滚动jQuery ui选项卡？

Question

我有一个600px X 150px的div，我需要粘贴一个jQuery UI选项卡。将只有2个选项卡，但每个选项卡将包含大量的文本和图像，但我不想调整div。如果我在CSS插入溢出选项div或.ui-tabs出现2滚动-1从div和另一个选项卡，它滚动所有选项卡面板。 问题：如何将垂直滚动插入标签内容？

在此先感谢。

Answer 1

我想我有一个解决方案给你，如果我正确理解你的问题。这是jsFiddle上的live example。

我添加了两个类，一个应用于整个选项卡元素，另一个应用于每个选项卡面板。

.container{ 
    width: 600px; 
} 
.panel{ 
    height: 150px; 
    overflow: auto; 
} 

（该container类也可以被重命名为ui-tabs让你添加到jQuery UI的ui-tabs类和panel类可以被重命名为ui-tabs-panel，让你添加到了jQuery UI ui-tabs-panel类）。

这里的加价，我用...

<div class='main'> 
    <div id="tabs" class='container'> 
     <ul> 
      <li><a href="#tabs-1">Tab 1</a></li> 
      <li><a href="#tabs-2">Tab 2</a></li> 
     </ul> 
     <div id="tabs-1" class='panel'> 
      <p>tab1 text...</p> 
     </div> 
     <div id="tabs-2" class='panel'> 
      <p>tab2 text...</p> 
     </div> 
    </div> 
</div> 

当我与一些jQuery UI的选项卡钩魔术这件事：

$(document).ready(function() { 
    $("#tabs").tabs(); 
}); 

我最终在选项卡内部有一个滚动条。

我希望这有助于！

Answer 2

只需使用css for ui-tab-content class就好像将css代码添加到您的样式表中希望您完成的任何位置。

.ui-tab-content, .ui-tabs-panel{overflow: auto;} 

感谢