仅在单击选项卡时如何加载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>

The above Approvals tab is connected to a div so I want the div to load only when the user clicks on this tab:

I don't want the div to load when the page loads

Answer 1

Try something like this:

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

Answer 2

Set display:none on the div that you don't want to appear on page load.

Then, bind a click handler to the approvals div:

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

Your markup might look something like this:

 $("#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>