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

【问题标题】：remove background colour from jquery tabs从 jquery 选项卡中删除背景颜色
【发布时间】：2015-01-29 12:01:14
【问题描述】：

我想删除包含 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>

【问题讨论】：

.ui-widget-header 背景
请在问题中包含您的代码。如果 JSFiddle 出现故障（经常发生），您的问题将无法回答。这就是为什么存在您已经解决的代码限制的原因。
使用浏览器开发工具 css 检查器来解决这个问题相当简单

标签： jquery html css jquery-ui-tabs jquery-tabs

【解决方案1】：

我想这就是你要找的。我用的是白色，但你可以添加任何你喜欢的颜色。

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

【讨论】：

【解决方案2】：

您需要删除元素.ui-widget-header的样式边框和背景

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

Working Demo

【讨论】：