Question

有没有办法以编程方式更改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>

Answer 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');
}

Answer 2

我能够通过更改jQuery代码获得所需的结果，如下所示：

＆＃13;

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

＆＃13;

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

2 个答案: