Question

我尝试设置特定的jQuery UI按钮，同时只留下其他按钮。

例如，我尝试过：

.myclass .ui-state-active, .ui-widget-content .ui-state-active , 
.ui-widget-header .ui-state-active {
        border: 1px solid #333;
        background: #390 50% 50% repeat-x;
        font-weight: strong;
        color: #FFF;
    }

和

#myID .ui-state-active, #myID .ui-widget-content .ui-state-active , 
#myID .ui-widget-header .ui-state-active {
            border: 1px solid #333;
            background: #390 50% 50% repeat-x;
            font-weight: strong;
            color: #FFF;
        }

但似乎都没有做我想要的。当我使用上面的尝试时，不会应用样式。我想我不清楚如何编写限于特定ID或子类范围的CSS。

我的fiddle is located here。这是一个简单的＆＃34;是/否＆＃34;按钮“工作”＆＃39;但是我正在尝试避免使用全局UI样式。

html是：

<input type="checkbox" id="tc_all" class='overall'>
<label for="tc_all">No</label>

jQuery片段是：

  $(function () {
      $("#tc_all").button().click(function () {
          var text = $(this).is(':checked') ? "Yes" : "No"
          $(this).button('option', 'label', text);
      });
  });

Answer 1

#tc_all:checked + label,
#tc_all + .ui-state-active {
    border: 1px solid #333;
    background: #390 50% 50% repeat-x;
    font-weight: bold;
    color: #FFF;
}

http://jsfiddle.net/5HCnf/5/

Answer 2

谢谢Sigma指出我正确的方向。感谢您的帮助。

最终，我最终将HTML包装在一个单独的DIV中，以避免使用＆＃34; +＆＃34;根据{{3}}，Safari浏览器的实现仍然存在错误。

<div class='overall'>
    <input type="checkbox" id="tc_all">
    <label for="tc_all">No</label>
    </input>
</div>

然后使用：

.overall .ui-state-active {
    border: 1px solid #333;
    background: #390 50% 50% repeat-x;
    font-weight: bold;
    color: #FFF;
}
.overall .ui-button {
    width: 100px;
    height: 35px;
}

示例link provided。

样式化特定的jQuery Button仅限于特定的ID或类

2 个答案: