Как загрузить DIV только при нажатии вкладки?

Question

<ul class="nav nav-tabs" role="tablist"> 
    <li class="active"><div id="tickets"><a href="#" role="tab" data-toggle="tab">My Tickets</a></div></li> 
    <li class="active"><div id="approvals"><a href="#" role="tab" data-toggle="tab">My Approvals</a></div></li> 
</ul> 

Вкладка выше Допуски подключен к div, поэтому я хочу, чтобы div загружать только тогда, когда пользователь щелкает на этой вкладке:

Я не хочу, чтобы загрузить DIV, когда страница загружается

Answer 1

Установите display:none на div, который вы не хотите отображать при загрузке страницы.

Затем привязать обработчик щелчка к одобрений DIV:

$("#approvals").click(function() { 
    $("#approvals_div").show(); 
}); 

Ваша разметка может выглядеть примерно так:

$("#approvals").click(function(){ 
 
    $("#approvals_div").toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav nav-tabs" role="tablist"> 
 
    <li class="active"><div id="tickets"><a href="#" role="tab" data-toggle="tab">My Tickets</a></div></li> 
 
    <li class="active"><div id="approvals"><a href="#" role="tab" data-toggle="tab">My Approvals</a></div></li> 
 
</ul> 
 
    
 
<div id="approvals_div" style="display:none;"> 
 
    I'm initially hidden! 
 
</div>

Answer 2

попробовать что-то вроде этого:

$("#approvals").click(function() { 
    $('#your_div_id').html('<div> Hello World </div>'); 
});