从jquery选项卡中删除背景颜色

Question

我想删除容纳2个标签的容器的背景灰色。所以只有标签是彩色的。我删除了所有的CSS，但没有喜悦。它必须来自JQuery .tabs()，有人可以建议我如何删除它吗？

$(document).ready(function() {
  $(".shoptab").tabs();
});

#list ul {
     border-radius: 0;
     background: none;
     border: 0;
     border-bottom: 1px solid #cbcdcd;
   }
   #list ul li {
     border-radius: 0;
   }
   #list {
     border: 0;
   }
   .ui-state-default,
   .ui-widget-content .ui-state-default,
   .ui-widget-header .ui-state-default {
     border-color: #e4e4e4;
     background: #f2f2f2;
     color: #cbcbcb;
   }
   .ui-state-default {
     color: #e7e7e7;
   }
   .ui-state-active,
   .ui-widget-content .ui-state-active,
   .ui-widget-header .ui-state-active {
     border-color: #cbcdcd;
     background: #fff;
     color: #333333;
   }
   .ui-state-hover,
   .ui-widget-content .ui-state-hover,
   .ui-widget-header .ui-state-hover {
     border: 1px solid #cbcdcd;
   }
   .ui-state-selected ui-state-hover,
   #ui-state-active ui-state-hover {
     background: #fff:
   }
   .ui-state-default a,
   .ui-state-default a:link,
   .ui-state-default a:visited {
     color: #a9a9a9;
   }
   .ui-state-hover a,
   .ui-state-hover a:hover {
     color: #333333;
   }
   .ui-state-active a,
   .ui-state-active a:link,
   .ui-state-active a:visited {
     color: #333333;
   }
   #list li ul li {
     margin-left: 10px;
     font-size: 11px;
     font-weight: bold;
     font-family: Arial, Verdana, sans-serif;
   }
   #list li ul li a {
     padding: 4px 7px 4px 7px;
   }
   #list li ul {
     margin: 0;
   }

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="loc-list">
  <div class="shoptab">
    <h2>Shop 1</h2>

    <ul>
      <li><a href="#tabs-1">Address</a>

      </li>
      <li><a href="#tabs-2">Opening hours</a>

      </li>
    </ul>
    <div id="tabs-1">
      <p>Tab 1 content</p>
    </div>
    <div id="tabs-2">
      <p>Tab 2 content</p>
    </div>
  </div>
</div>

Answer 1

您需要删除元素.ui-widget-header

的样式边框和背景

.ui-widget-header {
   border: 0px;
   background: none;
}

<强> Working Demo

Answer 2

我认为这是你正在寻找的东西。我用白色但你可以添加你喜欢的任何颜色。

.ui-widegt-header a{
width: 100%
background-color: none;
}