jquery - 更改事件选项卡和选项卡主体颜色

Question

我有一个 boostrap 标签，每个标签和标签内容都有不同的颜色。因此，当用户单击选项卡时，它会以适当的颜色显示选项卡内容。

我遇到的问题是，当选项卡处于事件状态时，选项卡变为白色而不是其颜色。即使我将 .active 类设置为不同的颜色或透明，它仍然显示白色。

当选项卡被选中时，我怎样才能使完整的选项卡正文背景颜色更改为特定的选项卡颜色，这样就没有空白区域了？

https://screenshots.firefox.com/RoLTo0UMRIWJNqfX/jsfiddle.net

下面是我的HTML代码

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified trackmy_b">
  <li class="active" style="background:#00ADED"><a data-toggle="tab" href="#tab-1">
 Block 1
  </a></li>
  <li style="background:#757070"><a data-toggle="tab" href="#tab-2">
 Block 2
  </a></li>
  <li style="background:#6F4677"><a data-toggle="tab" href="#tab-3">
  Block 3
  </a></li>
  <li style="background:#FF441F"><a data-toggle="tab" href="#tab-4">
 Block 4
  </a></li>
</ul>

<div class="tab-content" style="display:block">
  <div id="tab-1" class="tab-pane fade in active" style="background:#00ADED">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div style="background:#757070" id="tab-2" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="tab-3" style="background:#6F4677" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
   <div id="tab-4" style="background:#FF441F" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

我创建了一个 fiddle https://jsfiddle.net/livewirerules/e9rj0kwa/2/

任何帮助将不胜感激

Answer 1

对于选项卡颜色的问题，您需要覆盖 bootstrap css。你可以试试这个 css:

li.active>a {
  background-color: initial !important;
}

h3 的 margin-top 正在创建空白区域。删除它，如果需要，替换为 padding 以保持间距。

要使选项卡内容占文档高度的其余部分，您可以使用 calc()。从视口(viewport)中减去选项卡的高度。

fiddle

.nav-tabs>li:hover > a {
  background-color: transparent!important;
}

li.active>a {
  background-color: initial !important;
}

.tab-content div[id^="tab"]>h3 {
  margin-top: 0;
  padding-top: 20px;
}

.tab-content  div[id^="tab"] {
 height: calc(100vh - 42px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified trackmy_b">
  <li class="active" style="background:#00ADED"><a data-toggle="tab" href="#tab-1">
 Block 1
  </a></li>
  <li style="background:#757070"><a data-toggle="tab" href="#tab-2">
 Block 2
  </a></li>
  <li style="background:#6F4677"><a data-toggle="tab" href="#tab-3">
  Block 3
  </a></li>
  <li style="background:#FF441F"><a data-toggle="tab" href="#tab-4">
 Block 4
  </a></li>
</ul>

<div class="tab-content" style="display:block">
  <div id="tab-1" class="tab-pane fade in active" style="background:#00ADED">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div style="background:#757070" id="tab-2" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="tab-3" style="background:#6F4677" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="tab-4" style="background:#FF441F" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>