css - 使 JQuery UI 选项卡看起来像按钮

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 选项卡

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