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

然后使用返回的inde：

激活选项卡

$("#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>

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

1 个答案: