如何滾動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;} 

感謝