Как выбрать первую видимую вкладку 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)")); 

Затем активная вкладка с помощью возвращаемого 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>