jQuery TabData:是否可以获取ClickedTab数据,而不是索引?

时间:2008-12-11 05:12:31

标签: jquery tabs click

我设计了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

我该怎么做?

2 个答案:

答案 0 :(得分: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

提供进一步阅读

答案 1 :(得分:0)

我希望这意味着你让另一部分工作了。在前面的例子的基础上,这是可能的:

  $(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>

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

豫ICP备18024241号-1