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

Question

如何通过使用选项卡的标题而不是索引来自动 select 单击 HTML 按钮上的选项卡。通过使用标签索引，它可以像这样完成：

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

详情参考this

有什么方法可以从标签标题中获取标签 ID 以便我可以使用上面的代码吗？或者有什么方法可以使用选项卡名称自动 select 选项卡？

Answer 1

为此，您必须使用选项卡名称获取选项卡索引，如下所示，

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

在上面的代码中，[#your-tab] 是 link 给你的标签，得到索引后你可以做，

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

希望这会有所帮助。

Answer 2

您可以获得包含该标题的标签 ID，之后您将从该 ID（使用子字符串）获取 ID，最后 select 通过索引获取标签（使用 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>

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

Auto select a tab on HTML button click using tab name instead of tab id

html

javascript

jquery

tabs

jquery-ui-tabs