在 Bootstrap 3 中更改一个选项卡的颜色答案

【问题标题】：Change color of one tab in Bootstrap 3在 Bootstrap 3 中更改一个选项卡的颜色
【发布时间】：2018-08-31 02:20:55
【问题描述】：

有没有办法以编程方式更改 3 中只有一个 Bootstrap3 Navbar 选项卡的颜色？ jQuery 运行在 DataTables.net 表的“drawCallback”函数中，如果表中包含我想要更改一个选项卡颜色的数据。

这是我尝试过的

if (this.api().page.info().recordsTotal > 0) {
  $("#dvErrorsFlags").removeClass("nav-tabs");
  $("#dvErrorsFlags").addClass("nav-error-tabs");
  $("#tblErrors").show();
  $("#dvNoResultsFoundErrors").hide();
}
else {
  $("#dvErrorsFlags").removeClass("nav-error-tabs");
  $("#dvErrorsFlags").addClass("nav-tabs");
  $("#dvNoResultsFoundErrors").show();
  $("#tblErrors").hide();
}

.nav-error-tabs > li > a {
    color: #fff;
    cursor: default;
    background-color: #ff0000;
    border: 1px solid #800000;
    border-bottom-color: transparent;
}
.nav-error-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
  color: #fff;
  background-color: #ff0000;
  border: 1px solid #800000;
}

/* hover tab color */
.nav-error-tabs>li>a:hover {
  border-color: #000000;
  background-color: #111111;
}

<div class="tab-pane" id="dvErrorsFlags">
  <div class="dvTableHeadersWBtn">
    <div>
         <span style="text-align:center; float:left; width:93%"> Errors Information</span>
    </div>
  </div>
  <div id="dvNoResultsFoundErrors" class="DisplayNone SetClearBoth" style="margin-top:20px;">
      <span>No Errors Found</span>
  </div>
  <table id="tblErrors" style="width:100%; max-height:60px; overflow-y: scroll;" class=" table compact table-responsive sorting_disabled">
    <thead class="thead-inverse">
      <tr class="DetailTableHeaders">
        <th>E Mail</th>
        <th>Source</th>
        <th>Error/Flag Description</th>
        <th></th>
      </tr>
    </thead>
  </table>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap tabs

【解决方案1】：

.red {
    background-color: red;
}
.blue {
    background-color: blue;
}
.yellow {
    background-color: yellow;
}

这样的事情应该可以帮助您实现目标。祝你好运。

  var elementToColourChange = $("#dvTableHeadersWBtn');
  elementToColourChange.removeClasses('red blue yellow');

if (this.api().page.info().recordsTotal > 0) {
  elementToColourChange.addClass('yellow');
} else {
  elementToColourChange.addClass('red');
}

【讨论】：

没用。选择器 #dvTableHeadersWBtn 不起作用，因为 dvTableHeadersWBtn 是一个类而不是 id。

【解决方案2】：

通过如下更改 jQuery 代码，我能够得到想要的结果：

if (this.api().page.info().recordsTotal > 0) {
  $('a[href$="#dvErrorsFlags"]').css('background-color', '#800000');
  $("#tblErrors").show();
  $("#dvNoResultsFoundErrors").hide();
}
else {
  if ($('a[href$="#dvErrorsFlags"]').parent('li').hasClass('active') == true) {
    $('a[href$="#dvErrorsFlags"]').css('background-color', '#3D515F');
  }
  else {
    $('a[href$="#dvErrorsFlags"]').css('background-     color', '#f8f5f0');
  }   
  $("#dvNoResultsFoundErrors").show();
  $("#tblErrors").hide();
}

【讨论】：