如何套用 jQuery UI 頁籤 tabs 的樣式

我用 jQuery UI tabs 小工具作為網頁內容的容器, 內容會用一個 fieldset 元素包起來, 我希望當改變布景主題時, 這個 fieldset 的邊框顏色也能配合改變, 也就是說它的 border-color 樣式要能夠套用 jQuery UI 布景的設定, 這該怎麼做呢?
早上花了很多時間搜尋, 但是一無所獲. 後來用 Crome 的 Javascript 控制台工具查看 DOM 內容, 發現這其實很簡單, 你去看作為 tabs 容器的 div 元素, 在呼叫 tabs() 方法後, jQuery UI 會將此 div 元素加上一堆 class :

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">...</div>

我的 fieldset 就是放在 div 的內容裡. 要讓 fieldset 套用 tabs 的邊框顏色, 關鍵就是 ui-widget-content 這個樣式類別, 查看此類別內容如下 (這是 hot-sneaks 主題的設定值) :


.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
color: #2c4359;
}


所以 fieldset 只要套用 ui-widget-content 類別就可以了 :

<fieldset class="ui-widget-content">
我的內容
</fieldset>

這樣不論主題背景改成哪一種, fieldset 的邊框顏色也會跟著一起改變, 可以讓網頁有整體感, 不會很突兀.