Question

我正在努力学习关于jquery ui的文档（特别是标签：

我已经消化了js函数......但我正在努力解决这个问题。例如，我无法想象如何更改边框颜色（就像我的自定义甚至没有被读取）...

到目前为止，这是我的代码......

    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" rel="stylesheet" /> 
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  ui.tabs-container {position: relative; background: #0000cd; }
  ui.tabs {
      float: left;
      background: white;
      height:400px;
      line-height: 30 px;
      padding: 0 16px;
      width:409px;
      scrollbar:false;
      cursor: pointer;
} 
    ui.tabs:hover{ background: #f4f4f4; }
    ui.contents {
      float: left;
      position: absolute;
      left: 5%;
      height: 300px;
      margin-top: 31 px;
      padding: 0 px;
      border: 1 px solid #ccc;
      font-weight: normal;
      display: none;
}

Answer 1

对于jQuery UI，通常会有很多类涉及不同级别的级联，因此我建议您使用Chrome的开发人员工具或Firefox的Firebug来确定您需要使用css定位的内容。

例如，有了这个：

.ui-state-default.ui-corner-top.ui-tabs-active {
  background: red;
}

您可以更改活动标签的颜色......

演示：http://jsbin.com/umixan/1/edit

Answer 2

可能你正在寻找两个班级。 ui-state-default和ui-state-active。因此，只需添加每个州所需的样式。例如：

.ui-state-default {border:1px solid #000;}
.ui-state-active {border:1px solid #fff;}

注意，您的css（上面的代码）必须在jQuery的jquery-ui.css之后，否则您必须使用!important进行更改。

正如darkajax所说，你必须开始使用firebug（或Chrome的工具）。

Jquery UI - 似乎无法找出用于自定义选项卡颜色的CSS

2 个答案: