使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类。