Question

如何使用选项卡的标题而不是索引来自动选择HTML按钮上的选项卡。通过使用tab索引，可以这样做：

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

详情请参阅this

有没有办法从标签标题中获取标签ID，以便我可以使用上面的代码？或者有没有办法使用标签名称自动选择标签？

Answer 1

要执行此操作，您必须使用选项卡名称来获取选项卡索引，如下所示，

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

在上面的代码中，[＃your-tab]是指向您的标签的链接，在获得索引之后，您可以这样做，

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

希望这会有所帮助。

Answer 2

您可以获取包含该标题的标签的id，之后您将从该ID获取id（使用子字符串），最后按索引选择标签（使用id编号-1）。

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

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

$(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自动选择HTML按钮上的选项卡

2 个答案: