自动选择HTML按钮上的一个选项卡单击使用选项卡名称而不是选项卡ID

Question

如何自动选择HTML按钮上的选项卡单击使用选项卡的标题而不是它的索引。 通过使用标签指数是可以做到这样的：

$(".selector").tabs("option", "active", index_of_tab); 

详见this

有没有办法从分页标题获得标签的ID，这样我就可以使用上面的代码？或者有什么方法可以使用标签名称自动选择一个标签？

Answer 1

你可以得到包含该标题的标签ID，然后你将从该ID（使用子字符串）获取ID，最后通过索引（使用ID号-1）选择标签。

我创建了一个函数来执行这些动作fselectTabByTitle(title)

娄你可以找到一个完整的例子：

$(document).ready(function() { 
 
    $("#tabs").tabs(); 
 

 

 
    $(".btn").on("click", function() { 
 
    selectTabByTitle($(this).data("title")) 
 
    }) 
 

 
}); 
 

 
function selectTabByTitle(title) { 
 
    var tab = $("#tabs ul>li a:contains(" + title + ")"); 
 
    if (tab[0]) { 
 
    var tabid = tab[0].id; 
 
    var tabIndex = tabid.substr(tabid.length - 1); 
 
    $('#tabs').tabs('option', 'active', tabIndex - 1); 
 
    } 
 
}

#tabs { 
 
    width: 95%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
}

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

 
<div id="tabs"> 
 
    <ul> 
 
    <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-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> 
 
<button class="btn" data-title="Tab 1"> 
 
select Tab1 
 
</button> 
 
<button class="btn" data-title="Tab 2"> 
 
select Tab2 
 
</button> 
 
<button class="btn" data-title="Tab 3"> 
 
select Tab3 
 
</button>

Answer 2

要做到这一点，你必须使用，如下图所示，可以做标签名称获取标签的指数，

var index = $('#tabs a[href="#your-tab"]').parent().index(); 

在上面的代码[＃您的选项卡]的链接给你的标签，获得索引后，你可以做，

$(".selector").tabs("option", "active", index); 

希望这会有所帮助。