jQuery TabData：是否可以获取 ClickedTab 数据而不是索引？

Question

我设计了像下面这样的 TabMenu

<script type="text/javascript">
    $(function() {
      $('#container-1').tabs();
      $('#container-2').tabs();
    }
</script>

.....
<div id="container-1">
    <ul>
    <li><a href="#fragment-1"><span id="start">First</span></a></li>
    </ul>
</div>
<div id="container-2">
    <ul>
    <li><a href="#fragment-1"><span id="end">Last</span></a></li>
    </ul>
</div>
.....

是否可以获取 ClickedTab 数据而不是索引？ 就像如果 ClickTab 是第一个然后是 #fragment1 一样。 否则，如果 ClickTab 位于最后，则#fragment2。

我怎样才能做到这一点？

Answer 1

你能澄清一下你的意思吗？

如果您将其更改

<li><a href="#fragment-1"><span id="end">Last</span></a></li>

为

<li><a href="#fragment-2"><span id="end">Last</span></a></li>

：那么当您单击它时它将加载#fragment-2。

如果您确实想获取单击选项卡的数据，那么您可以挂钩 tabsselect 事件

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
//ui.panel is a dom element that contains the contents of the clicked tab.
}

进一步阅读可在 Jquery UI 文档

Answer 2

我希望这意味着您已经完成了另一部分的工作。 在前面的示例的基础上，这是可能的：

  $(document).ready(function() {
      $('#container-1').tabs({
          selected : function(e, ui) {
            if ($($("a", e.target).get(ui.index)).attr('href') == '#fragment-1') {
                alert('First clicked!');
            }
          }        
      }); 
  });
   ....
  <div  id="container-1">
        <ul>
            <li><a href="#fragment-1"><span>Home</span></a></li>
            <li><a href="#fragment-2"><span>Contact</span></a></li>

         </ul>
  </div>

最终，使用索引可能更好，因为这需要您了解一些选项卡实现细节，并且您可以使用开关来处理每个选项卡的逻辑。 但是，如果您觉得内容更适合您的需求，那么这应该就可以了。