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 docs

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>

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