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

Question

我正在尝试使用 JQuery 自动选择一个选项卡。 这是我的代码。我试图初始化 JQuery 但仍然得到相同的错误。

 $("ul.tabs").tabs();
 $( "#messages" ).tabs( "option", "active", 2 );

HTML

<ul class="nav nav-tabs" id="myTab" style="top: -78px;width:100%;">
  <div class="liner"></div>
  <li class="active">
    <a href="#home" data-toggle="tab" title="welcome">
      <span class="round-tabs one">
        <i class="glyphicon glyphicon-globe" ></i>
       </span>
    </a>
  </li>
  <li>
    <a href="#profile" data-toggle="tab" title="Email forwarding">
      <span class="round-tabs two">
          <i class="glyphicon glyphicon-envelope" ></i>
      </span>
    </a>
  </li>
  <li class="">
    <a href="#messages" data-toggle="tab" title="Edit your spins here">
      <span class="round-tabs three">
           <i class="glyphicon glyphicon-pencil" ></i>
      </span>
    </a>
  </li>
</ul>

Answer 1

按照第一个示例中的 html https://jqueryui.com/tabs/

您在“ul.tabs”元素上初始化了选项卡小部件，但正在尝试更改其他选项卡上的选项。

$("ul.tabs").tabs();  
$("ul.tabs").tabs("option", "active", 2);

Answer 2

您的 HTML 与您的选择器不匹配，因此我已使用假设和脚本更新了 html。更新为在目标列表中显示/使用索引。

var mytabs = $("#mytabs");
mytabs.tabs();
// set by index, a bit inflexible for you  
//mytabs.tabs("option", "active", 2);
// get the index in the list and use it
var atarget = $('#messages').index(".mytargets");
mytabs.tabs("option", "active", atarget );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="mytabs">
    <ul class="nav nav-tabs" id="myTab" style="top: -78px;width:100%;">
      <div class="liner"></div>
      <li class="active">
        <a href="#home" data-toggle="tab" title="welcome">
          <span class="round-tabs one">
            <i class="glyphicon glyphicon-globe" ></i>
           </span>
        </a>
      </li>
      <li>
        <a href="#profile" data-toggle="tab" title="Email forwarding">
          <span class="round-tabs two">
              <i class="glyphicon glyphicon-envelope" ></i>
          </span>
        </a>
      </li>
      <li class="">
        <a href="#messages" data-toggle="tab" title="Edit your spins here">
          <span class="round-tabs three">
               <i class="glyphicon glyphicon-pencil" ></i>
          </span>
        </a>
      </li>
    </ul>
<div id="home" class="mytargets">I am home</div>
<div id="profile" class="mytargets">I am profile</div>
<div id="messages" class="mytargets">I am messages</div>
</div>

请注意，我已更新，因此如果您添加新标签，ID 为 messages 的标签仍将获得焦点/活动状态。

Answer 3

我已经找到了解决这个问题的方法。这对我来说非常有效。

var activeTab = "#messages";

$('a[href="' + activeTab + '"]').tab('show');