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

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>