如何选择第一个可见的jQuery选项卡

Question

我有一个jQuery选项卡设置，目前可以使用以下方法隐藏标签：

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

我将tabRef放入一个数组中，如果需要再次显示该选项卡，则从数组中取出。

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

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

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

即使第一个标签不可见，它也会将其设置为活动状态。我需要做什么才能让第一个选项卡可见？循环遍历选项卡并检查属性？还是在活动代码中添加一些内容可以使隐藏的选项卡不活动？

- Bill

---

你有使用过伪选择器吗？https://api.jquery.com/visible-selector/讲述了一个可能适用的选择器。将你的$("#tabs")更改为$("#tabs:visible")，看看是否有帮助。 - Snowmonkey

那似乎没有帮助。 - Bill

你有一个示例fiddle或者其他用于测试的设置吗？ - Snowmonkey

no- sorry I don't - Bill

直到有更好的解决方案出现之前，我做了我认为是一个hack的事情。当我删除一个选项卡时，我会从数组中删除它的索引，然后执行$("#contribution_tabs:visible").tabs("option", "active", array[0]);。虽然不是最漂亮的代码，但似乎可以工作。 - Bill

Answer 1

这是一个可运行的代码示例.

您可以使用以下方法来选择第一个可见选项卡的索引：

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>

- Zakaria Acharki