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

关注第一个示例https://jqueryui.com/tabs/

中的html

您在＆＃34; ul.tabs＆＃34;上初始化了标签小部件。元素，但正在尝试更改其他内容的标签选项。

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

Answer 2

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

＆＃13;

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 );

＆＃13;

<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>

＆＃13;

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

Answer 3

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

var activeTab =“＃message”;

$（'a [href =“'+ activeTab +'”]'）。tab（'show'）;

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

3 个答案: