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

尝试这样的事情：

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

Answer 2

在您不希望在页面加载时显示的div上设置display:none。

然后，将单击处理程序绑定到批准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>