javascript - 如何在标签点击时加载带有 url 参数的页面？

Question

我的页面有 5 个不同的选项卡。所有这些都在当前代码中同时加载。这不是很有效，因为我同时加载了五个文件。相反，我想在第一个初始页面加载时只加载一个（默认）。我想在单击时使用 ajax/jquery 加载其余选项卡。这是我当前代码的示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      <h4>Company Profile</h4>
      <ul class="nav nav-tabs card-header-tabs" id="company_tabs" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#page_1">Page 1</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_2">Page 2</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_3">Page 3</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_4">Page 4</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_5">Page 5</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#page_6">Page 6</a></li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content">
        <div id="page_1" class="tab-pane active">
          <cfinclude template="page_1.html">
        </div>
        <div id="page_2" class="container tab-pane fade">
          <cfinclude template="page_2.html">
        </div>
        <div id="page_3" class="container tab-pane fade">
          <cfinclude template="page_3.html">
        </div>
        <div id="page_4" class="container tab-pane fade">
          <cfinclude template="page_4.html">
        </div>
        <div id="page_5" class="container tab-pane fade">
          <cfinclude template="page_5.html">
        </div>
        <div id="page_6" class="container tab-pane fade">
          <cfinclude template="page_6.html">
        </div>
      </div>
    </div>
  </div>
</div>

我想在点击时加载每个 html 文件。当用户第一次打开页面时，默认情况下只加载第 1 页。单击时应加载所有其他选项卡。我在这个项目中使用 JQuery 和 Bootstrap 4。

标签： javascriptjquerybootstrap-4bootstrap-tabs