禁用活動選項卡上的鏈接（引導程序）

Question

我通過Bootstrap使用選項卡。我無法達成這個問題的目標。設想一個簡單的例子，如下面的例子。當我點擊一個標籤時，顯示的內容是完美的。

現在假設內容加載資源密集並且很長時間到達（例如一個大的SQL查詢），我不希望當我再次點擊相同的標籤時，內容正在充電。

但是，我無法制作它。下面的例子說明了我的問題，因爲如果你重新點擊標籤，我們會看到背景變化，所以我不會改變它。

的HTML：

<div role="tabpanel"> 

    <ul class="nav nav-tabs" role="tablist" id="myTab"> 
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
    </ul> 

    <div class="tab-content text-center"> 
    <div role="tabpanel" class="tab-pane active" id="home"><p><i class="fa fa-refresh fa-spin"></i> HOME </p></div> 
    <div role="tabpanel" class="tab-pane" id="profile"><p><i class="fa fa-refresh fa-spin"></i> PROFILE </p></div> 
    <div role="tabpanel" class="tab-pane" id="messages"><p><i class="fa fa-refresh fa-spin"></i> MESSAGES </p></div> 
    <div role="tabpanel" class="tab-pane" id="settings"><p><i class="fa fa-refresh fa-spin"></i> SETTINGS </p></div> 
    </div> 

</div> 

和相關的jQuery是剛剛通過引導$('#myTab a').tab('show');

提供的文檔，請看看this JSFIDDLE

那麼如何禁用的標籤時，它是活性？

Answer 1

檢查DEMO

$(document).ready(function(){  
    $('#myTab a').tab('show');  
    $('#myTab a').click(function(){ 
     if (!$(this).closest('li').hasClass('active')) { 
     $('.tab-content').css('background', '#' + random_colour()); 
     } 
    }); 
}); 

Answer 2

Fiddle Demo

$(document).ready(function(){  
    $('#myTab a').tab('show');  
    $('#myTab a').click(function(){ 
     if(!($(this).parent("li").hasClass("active"))) 
     { 
      $('.tab-content').css('background', '#' + random_colour()); 
     } 

    }); 
}); 

function random_colour(){ 
    return Math.floor(Math.random()*16777215).toString(16); 
}