有没有办法以编程方式更改 3 中只有一个 Bootstrap3 导航栏选项卡的颜色? 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>
.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');
}
我能够通过更改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();
}