javascript - 如何选择第一个可见的 jquery 选项卡

Question

我设置了 jQuery 选项卡，目前可以使用隐藏选项卡

$("[href='"+ tabRef +"']").closest("li").hide();

然后，我将 tabRef 放入一个数组中，如果需要再次显示该选项卡，则将其拉出

$("[href='"+ tabRef +"']").closest("li").show();

我需要做的是将第一个可见选项卡设置为事件状态。如果我使用

$("#tabs").tabs("option", "active", 0);

即使第一个选项卡不可见，它也会将其设置为事件状态。我需要做什么才能将第一个选项卡设置为可见？循环选项卡并检查属性？或者我可以在事件代码中添加一些不会使隐藏选项卡处于事件状态的内容吗？

Answer 1

<强> Working fiddle 。

您可以使用以下方式选择第一个可见选项卡的索引:

var first_visible_tab_index = $( "li" ).index($("li:visible:eq(0)"));

然后使用返回的索引激活选项卡:

$("#tabs").tabs("option", "active",  first_visible_tab_index );

希望这有帮助。

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

$("#tabs").tabs("option", "active", $( "li" ).index( $("li:visible:eq(0)") ));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet"/>

<div id="tabs">
  <ul>
    <li style='display:none'><a href="#tabs-0">Tab 0</a>
    </li>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
  </ul>
  <div id="tabs-0" style='display:none'>
    <p>Content for Tab 0</p>
  </div>
  <div id="tabs-1">
    <p>Content for Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Content for Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Content for Tab 3</p>
  </div>
</div>
<div id="tabid"></div>