特定选项卡的 CSS 背景颜色答案

【问题标题】：CSS Background Colour of Specific Tab特定选项卡的 CSS 背景颜色
【发布时间】：2016-02-23 09:56:50
【问题描述】：

HTML

<div class="woocommerce-tabs wc-tabs-wrapper">
   <ul class="tabs wc-tabs">
       <li class="paym-plans_tab">
          <a href="#tab-paym-plans">Contract Deals</a>
       </li>
          <li class="simfree-plans_tab active">

CSS

#tabs ul.wooTabs li a.selected, #tabs ul.tabs li.active a, .woocommerce_tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li.active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

尝试将特定 woocommerce 选项卡 .paym-plans_tab active 和 .simfree-plans_tab active 的背景颜色更改为 #52b9e9，并且仅在选择选项卡时将文本颜色更改为白色，上面的 CSS 更改了所有选项卡，我如何才能仅针对我想要的选项卡。

【问题讨论】：

如果您只想更改当前“选定”选项卡上的颜色，您可能需要 JavaScript 解决方案。
但是标签有自己的类是没有办法定位它
如果我理解正确，那么我不这么认为，因为需要一些逻辑来跟踪哪个选项卡被“选中”。您可以通过将所有选项卡清除为“未选择”颜色，然后将选定的选项卡设置为“选定”颜色，将 onclick() JavaScript 函数添加到有效的选项卡。
but when each tab is selected it changes to .class active as you can see in the HTML
在这种情况下，您可以为 li.active 创建一个新的 CSS 块，指定新的颜色。

标签： html css wordpress woocommerce

【解决方案1】：

如果我理解正确，您只需要以下内容：

.wc-tabs .active a {
    background: #52b9e9 none repeat scroll 0 0;
    color: white;
}

当然，当您单击标签并将其从先前活动的标签中删除时，您的框架应该将 active 类分配给标签

【讨论】：

您能提供更多信息吗？为什么不容易？你能提供那个woocommerce的样本吗？我们大多数人的工作站上都没有它，如果我们可以在线尝试并分享结果会容易得多
mobilereactor.co.uk/shop/mobile-phones/…可以查看相关标签页的页面源代码。
现在应该可以访问了，我禁用了维护模式
谢谢，我尝试在您的网站上实现这一点并更新了答案（在选择器中添加了a），请尝试一下。它将 URL 样式设置为您要求的样式
我将 CSS 更新为 .simfree-plans_tab .active a { background: #52b9e9 none repeat scroll 0 0 !important; color: white !important; } 并且 sim free 选项卡仍然是相同的颜色，这是我的问题，哈哈

【解决方案2】：

见this

.paym-plans_tab {
  background-color: #52b9e9;
  color: white;
  }

.paym-plans_tab > a {
  color: white;
 }

.simfree-plans_tab > a {
   color: white;
  }


a:hover {
 background-color: red;
}

.simfree-plans_tab {
  background-color: #52b9e9;
  color: white;
 }

【讨论】：

这会改变标签后面的颜色