[英]Bootstrap nav nav-tabs setting tab.('Show') in javascript on refresh causes screen flicker
我有一个MVC页面,该页面每10秒钟左右刷新一次,这是使用javascript完成的,并返回JSON。 我的第一个问题是在返回活动目录时设置不正确。 我已经解决了这个问题,页面甚至返回到刷新之前的相同位置。
我的问题是,当我设置显示活动标签时,无论您要调用什么,屏幕都会闪烁/闪烁。
这是我在做什么.....
VehicleDetails.prototype.requestVehicleDetails = function () {
var self = this;
var active = $('#VehicleTabs li.active').text();
if (active == "Alerts") {
self.activeTab = 0;
}
if (active == "Overview") {
self.activeTab = 1;
}
if (active == "Tires") {
self.activeTab = 2;
}
$.ajax({
type: 'GET',
url: self.vehiclesUrl + "/VehicleDetails?id=" + self.chid + "&alertsPage=" + self.alertsPage + " &warningsPage=" +
self.warningsPage + "&activeTab=" + self.activeTab,
cache: false,
success: function (result) {
self.updateVehicleDetails(result);
$("#data-error-alert").hide();
self = null;
},
error: function (result) {
$("#data-error-alert").show();
self = null;
}
});
};
VehicleDetails.prototype.updateVehicleDetails = function (result) {
var self = this;
self.vehicleDetails = result;
$("#change-status-button").removeAttr("disabled");
$("#change-assignments-button").removeAttr("disabled");
var template = $.templates("#vehicle-deatils-template");
var htmlOutput = template.render(result);
$("#content-placeholder").html(htmlOutput);
//set the active tab back to what it was
this.showActiveTab(this.activeTab);....
VehicleDetails.prototype.showActiveTab = function (activeTab) {
//this does not work to keep from blinking
// on load of the page: switch to the currently selected tab
//var hash = window.location.hash;
//$('#VehicleTabs a[href="' + hash + '"]').tab('show');
if (activeTab === 0) {
$('[href="#tabAlarms"]').tab('show');
}
if (activeTab === 1) {
$('[href="#tabOverview"]').tab('show');
}
if (activeTab === 2) {
$('[href="#tabTires"]').tab('show');
}
};
我尝试了其他解决方案,例如...。
<style type="text/css">
.js #VehicleTabs {
display: none;
}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
</script>
但这仅隐藏了选项卡并显示了第一个选项卡的数据,但我无法进入其他选项卡。
任何帮助将不胜感激。
通过从选项卡div中删除活动类,我能够解决页面刷新时的屏幕闪烁问题。
<div id="tabAlarms" class="tab-pane fade in">
@*<div id="tabAlarms" class="@(Model.ActiveTab == 0 ? "tab-pane fade in active" : "tab-pane fade in")">*@
<div class="row" id="alerts">
@Html.Partial("_Alerts", Model)
</div>
</div>
<!--Overview tab-->
<div id="tabOverview" class="tab-pane fade in">
@*<div id="tabOverview" class="@(Model.ActiveTab == 1 ? "tab-pane fade in active" : "tab-pane fade in")">*@
<div class="row" id="overview">
@Html.Partial("_Overview", Model)
</div>
</div>
<!--Tires tab-->
<div id="tabTires" class="tab-pane fade in">
@*<div id="tabTires" class="@(Model.ActiveTab == 2 ? "tab-pane fade in active" : "tab-pane fade in")">*@
<div class="row" id="tires">
@Html.Partial("_Tires", Model)
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.