Question

我希望有一个类似于标签的界面，如本页面中的那样：

除了我希望标签看起来更像按钮：

选项卡组看起来像上面的单选按钮组。有没有办法可以改变标签的外观，使它们看起来更像是第二个链接上的“收音机”按钮？或者，您是否建议使用另一种方法使标签看起来像按钮？谢谢！

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

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

1 个答案: