无法在初始化之前调用选项卡上的方法；试图调用方法“加载”

Question

我正在尝试使用 jquery-ui .tabs 方法刷新/加载引导选项卡。

$('#myTab a').on('click', function () {
  console.log("sanity check");
  $("#myTab").tabs('load')
})

但我收到此错误

cannot call methods on tabs prior to initialization; attempted to call method 'load'

我确实知道引导程序和 jquery-ui 冲突，但我不明白我做错了什么

这就是我包含 bootstrap 和 jquery 插件的方式：

<!-- Bootstrap core JavaScript -->
<script src="/jquery.min.js"></script>
<script src="/jquery-ui.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/jquery.easing.min.js"></script>
<script src="/bootstrap.bundle.min.js"></script>

我已经删除了这里的实际路径，所以不要对此感到困惑。

这是确切的错误：

jquery.min.js:2 Uncaught Error: cannot call methods on tabs prior to 
initialization; attempted to call method 'load'
at Function.error (jquery.min.js:2)
    at HTMLUListElement.<anonymous> (jquery-ui.min.js:6)
    at Function.each (jquery.min.js:2)
    at k.fn.init.each (jquery.min.js:2)
    at k.fn.init.t.fn.<computed> [as tabs] (jquery-ui.min.js:6)
    at HTMLAnchorElement.<anonymous> (products.js:65)
    at HTMLAnchorElement.dispatch (jquery.min.js:2)
    at HTMLAnchorElement.v.handle (jquery.min.js:2)
    error @ jquery.min.js:2
    (anonymous) @ jquery-ui.min.js:6
    each @ jquery.min.js:2
    each @ jquery.min.js:2
    t.fn.<computed> @ jquery-ui.min.js:6
    (anonymous) @ products.js:65
    dispatch @ jquery.min.js:2
    v.handle @ jquery.min.js:2

这是html代码

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
  <a class="nav-link active" id="home-tab" data- toggle="tab" 
  href="#dashboard" role="tab" aria-controls="home" aria- 
  selected="true">Dashboard</a>
</li>
<li class="nav-item">
  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#liked" 
  role="tab" aria-controls="contact" aria-selected="false">Liked by you</a>
</li>
<li class="nav-item ml-auto">
  <a class="nav-link" id="profile-tab" data- toggle="tab" href="#posts" 
  role="tab" aria-controls="profile" aria-selected="false">your posts</a>
</li>
</ul>

<div class="tab-content" id="myTabContent">
<!-- dashboard -->
 <div class="tab-pane fade show active" id="dashboard" role="tabpanel" 
 aria-labelledby="home-tab">
 </div>

<!-- posts -->
 <div class="tab-pane fade" id="posts" role="tabpanel" aria- 
 labelledby="posts-tab">
 </div>

<!-- liked -->
 <div class="tab-pane fade" id="liked" role="tabpanel" aria- 
 labelledby="liked-tab">
 </div>

Answer 1

无法在初始化之前调用选项卡上的方法；试图调用方法'load'

这告诉你在你开始调用load方法时你还没有初始化tabs。

所以你需要在调用load之前像这样初始化它们：

$("#myTab").tabs();

这里有一些reference关于如何使用Jquery tabs

Answer 2

您的 HTML 格式不正确。参见示例：https://jqueryui.com/tabs/

您必须将标签包装在 DIV 中。

$(function() {
  $("#myTab").tabs();
  $('#myTab a').on('click', function() {
    console.log("sanity check");
    $("#myTab").tabs('load')
  })
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="myTab">
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data- toggle="tab" href="#dashboard" role="tab" aria-controls="home" aria- selected="true">Dashboard</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#liked" role="tab" aria-controls="contact" aria-selected="false">Liked by you</a>
    </li>
    <li class="nav-item ml-auto">
      <a class="nav-link" id="profile-tab" data- toggle="tab" href="#posts" role="tab" aria-controls="profile" aria-selected="false">your posts</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <!-- dashboard -->
    <div class="tab-pane fade show active" id="dashboard" role="tabpanel" aria-labelledby="home-tab">
    </div>

    <!-- posts -->
    <div class="tab-pane fade" id="posts" role="tabpanel" aria- labelledby="posts-tab">
    </div>

    <!-- liked -->
    <div class="tab-pane fade" id="liked" role="tabpanel" aria- labelledby="liked-tab">
    </div>
  </div>
</div>