0

我正在努力阅读有关 jquery ui 的文档（特别是标签：

我已经消化了 js 函数……但我在 css 上苦苦挣扎。例如，我不知道如何更改边框颜色（就像我的自定义设置甚至没有被读取）......

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

    <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;
}
4

2 回答 2

3

When it comes to jQuery UI there's usually a lot of classes involved with different levels of cascading, so I recommend you use Chrome's developer tools or Firefox's Firebug to figure out what you need to target with your css.

For example, with this:

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

You can change the color of the active tab...

Demo: http://jsbin.com/umixan/1/edit

于 2013-04-14T03:04:27.630 回答
0

可能您正在寻找两个课程。ui-state-default和ui-state-active。因此，只需为每个州添加您需要的样式。例子：

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

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

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

于 2013-04-14T03:11:47.297 回答