使JQuery用戶界面，標籤看起來像按鈕

Question

我想有這樣的人在這個頁面中的標籤式界面：

http://jqueryui.com/tabs/#default

除了我想的標籤看起來更像如按鈕：

http://jqueryui.com/button/#radio

當該組選項將類似於以上組單選按鈕。有沒有一種方法可以改變標籤的外觀，讓它們看起來更像第二個鏈接上的「收音機」按鈕？或者有另外一種方法可以讓標籤看起來像按鈕一樣嗎？謝謝！

Answer 1

這裏是你希望的html + css.classes

<div id="radio" class="ui-buttonset"> 
    <input type="radio" name="radio" id="radio1" class="ui-helper-hidden-accessible"><label for="radio1" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" role="button" aria-disabled="false" aria-pressed="true"><span class="ui-button-text">Choice 1</span></label> 
    <input type="radio" checked="checked" name="radio" id="radio2" class="ui-helper-hidden-accessible"><label for="radio2" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Choice 2</span></label> 
    <input type="radio" name="radio" id="radio3" class="ui-helper-hidden-accessible"><label for="radio3" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false" aria-pressed="false"><span class="ui-button-text">Choice 3</span></label> 
</div> 

，這裏是一個jQuery UI的TAB

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> 
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-1" aria-labelledby="ui-id-1" aria-selected="true"><a href="#tabs-1" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Nunc tincidunt</a></li> 
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Proin dolor</a></li> 
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-3" aria-labelledby="ui-id-3" aria-selected="false"><a href="#tabs-3" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Aenean lacinia</a></li> 
</ul> 

現在，要顯示TABS擁有UI的buttonset ..只是通過重新設計你的html來重用這些類。

<ul class="ui-buttonset"> 
    <li class="ui-helper-hidden-accessible"><a href="" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left ui-state-active" role="button" aria-disabled="false" aria-pressed="true"><span class="ui-button-text"> 

，但是這可能是嚴厲的，只是「回收」的jQuery UI類。

我建議你改寫自己的.css以覆蓋相關的樣式。我的意思是，重寫jQuery-ui TABS樣式，而不是試圖回收.css類。