当ui-tabs处于活动状态时，我尝试使用不同的颜色，我使用jquery ui但无法设法做到这一点。 有什么帮助吗？
这里是jsfiddle文件！ JS Fiddle
HTML：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs_main_1">main1</a></li>
<li><a href="#tabs_main_2">main2</a></li>
</ul>
<div id="tabs_main_1">
<div id="tabs_child_1">
<ul>
<li><a href="#child_sub1-1">sub1-1</a></li>
<li><a href="#child_sub1-2">sub1-2</a></li>
<li><a href="#child_sub1-3">sub1-3</a></li>
</ul>
<div id="child_sub1-1"></div>
<div id="child_sub1-2"></div>
<div id="child_sub1-3"></div>
</div>
</div>
<div id="tabs_main_2">
<div id="tabs_child_2">
<ul>
<li><a href="#child_sub2-1">sub2-1</a></li>
<li><a href="#child_sub2-2">sub2-2</a></li>
</ul>
<div id="child_sub2-1"></div>
<div id="child_sub2-2"></div>
</div>
</div>
</div>
CSS：
.wrap_ui_tabs { width: 980px; min-height: 100px; padding-top: 36px; color: #000;}
.ui-tabs { position: relative; margin: 0 auto; }
.ui-tabs .ui-tabs-nav { padding: 10px 30px 30px 0px; }
.ui-tabs .ui-tabs-nav li { background-color: #dddddd; list-style: none; float: left; position: relative; top: 0; border-bottom-width: 0; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav a { color: #fff; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color: #41b2f2; color: #fff; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: pointer; }
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; background: none; }