自动对焦于选项卡

Question

我正在尝试在页面加载时将自动焦点设置在选项卡上，但我无法使其工作。我已经创建了一个小提琴，正如您在代码中看到的那样，我正在尝试使用class="test将焦点设置在选项卡上 谁能看到我做错了什么？

http://jsfiddle.net/qL2W4/2391/

<div id="mydiv">
  <ul>
      <li><a href="#">rr</a></li>
      <li class="test"><a href="#">gg</a></li>
      <li><a href="#">mm</a></li>
  </ul>
</div>

$("#mydiv").tabs();
$("#mydiv").find(".test").focus();

Answer 1

您可以使用selected选项：

$("#mydiv").tabs({ selected: 1 });

Updated Fiddle

如果您希望它基于具有特定类的li工作，您可以通过获取所选类的li的索引并将其传递到选项卡选项来实现：

var selected = $(".test").index();

$("#mydiv").tabs({ selected: selected });

Fiddle

Answer 2

尝试下一步：

$("#mydiv").tabs();
$("#mydiv").find(".test a").trigger("click");

或者，如果您只需要切换选项卡 - 请使用活动属性：

$("#mydiv").tabs();
$("#mydiv").tabs({
    active:1
});

P.S。在我看来，如果你不需要为其他东西发出点击事件，第二种方法会更好。

Answer 3

您可以简单地模拟点击：

<div id="mydiv">
  <ul>
    <li><a href="#">rr</a></li>
    <li><a href="#" class="test">gg</a></li> <!-- NOTE CHANGE -->
    <li><a href="#">mm</a></li>
  </ul>
</div>

$( document ).ready(function() {
  $("#mydiv").tabs();
  $('.test').click();
});