引導導航導航標籤設置選項卡（'顯示'）在刷新javascript導致屏幕閃爍

我有一個MVC頁面刷新每隔10秒左右，這是使用JavaScript並返回JSON。我的第一個問題是，如果返回活動沒有正確設置。我解決了這個問題，頁面甚至返回到刷新前的相同位置。引導導航導航標籤設置選項卡（'顯示'）在刷新javascript導致屏幕閃爍

我的問題是，當我設置活動標籤顯示時，屏幕閃爍/閃爍任何你想調用它。

下面是我在做什麼.....

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>

但這隻藏的標籤和顯示數據對於第一個標籤，但我無法訪問其他標籤。

任何幫助將不勝感激。

來源

2017-08-11 D Beck

可能有助於提供更多的上下文，作爲您使用的Bootstrap版本。 – BogdanC

我正在使用bootstrap的3.3.4版本 –

我能夠通過從選項卡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>

來源

2017-08-14 20:32:21

引導導航導航標籤設置選項卡（'顯示'）在刷新javascript導致屏幕閃爍

回答

相關問題