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>

我创造了一个小提琴 https://jsfiddle.net/livewirerules/e9rj0kwa/2/

任何帮助将不胜感激

Answer 1

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

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

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

要使标签内容成为文档高度的其余部分，您可以使用padding。从视口中减去选项卡的高度。

fiddle

＆＃13;

calc()

＆＃13;

.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);
}

＆＃13;

Answer 2

您正面临崩溃边距问题。在标签内容中，您有一个h3元素，边缘顶部与标签折叠，因此应用于标签，在标签和导航（您拥有的空白区域）之间创建间隙。要解决此问题，您可以在标签上添加一个小的填充顶部（或删除此边距）。

.tab-content>.tab-pane {
  padding-top:1px;
}

这是完整的代码：

＆＃13;

.nav-tabs>li>a:hover {
  background-color: transparent!important;
}

.tab-content>.tab-pane {
  padding-top: 1px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 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>

＆＃13;

更改活动选项卡和选项卡主体颜色

2 个答案: