2013-07-31 72 views
0

我遇到问题。触发选项卡激活功能 - JQuery UI选项卡

HTML片段看起来像这样

<div id="mainTab"> 
    <ul> 
     <li><a href='#tabs-1'>TabGroup1</a></li> 
     <li><a href='#tabs-2'>TabGroup2</a></li>    
    </ul> 
    <div id='tabs-1'> 
     <a onclick="showSubTab1Tab2();">showSubTab1Tab2</a> 
     <a onclick="showSubTab2Tab2();>showSubTab2Tab2</a> 
    </div> 
    <div id='tabs-2'> 
     <!-- First Sub Tab --> 
     <div id="subTab1"> 
      <ul> 
       <li><a href='#tabs-3'>TabGroup3</a></li> 
       <li><a href='#tabs-4'>TabGroup4</a></li>    
      </ul> 
      <div id='tabs-3'> 

      </div> 
      <div id='tabs-4'> 

      </div> 
     </div> 
     <!-- Second Sub Tab --> 
     <div id="subTab2"> 
      <ul> 
       <li><a href='#tabs-5'>TabGroup5</a></li> 
       <li><a href='#tabs-6'>TabGroup6</a></li>    
      </ul> 
      <div id='tabs-5'> 

      </div> 
      <div id='tabs-6'> 

      </div> 
     </div> 
    </div> 
</div> 

和JavaScript这个样子。我正在使用JQuery UI 1.10.3

$("#mainTab").tabs(); 

$("#subTab1").tabs({ 
    activate: function(event, ui) { 
     // Update Some Logs 
    } 
}); 

$("#subTab2").tabs({ 
    activate: function(event, ui) { 
     // Update Some Logs 
    } 
}); 

function showSubTab1Tab2() { 
    $("#mainTab").tabs("option", "active", 1); 
    $("#subTab1").tabs("option", "active", 1); 
} 

function showSubTab2Tab2() { 
    $("#mainTab").tabs("option", "active", 1); 
    $("#subTab2").tabs("option", "active", 1); 
} 

如果用户单击“showSubTab2Tab2”。我改变了主选项卡。将用户转到第二个选项卡。然后激活subTab2的第二个选项卡,并且如果选项卡先前未激活,将激活第二个选项卡并触发激活事件

现在就是这个问题。如果用户这样做了两次,那么第二次激活事件不会被触发。我需要该事件来记录/填充一些代码。

我不能在我的功能做到这一点。

+0

那么它已经激活,所以它不会触发事件,因为它不需要。你为什么需要它再次开火? –

+0

@PatrickEvans看到我的编辑问题。我需要触发事件来记录/填充一些代码,因为我有多个选项卡式应用程序。 –

回答

-1

,如果你尝试之前检查showSubTab1Tab2()

http://jsfiddle.net/S4nua/1/

+0

感谢您的回答。但是这并不能解决我的问题。我需要点燃激活事件。我有一个常用的方法来激活/重新加载标签。我不知道哪个选项卡将要更改/激活。这就是为什么我需要激发事件。 –

+0

我的方法总是调用事件。有一个叫做log1的函数。如果tab已经激活,则调用此方法。如果没有,该选项卡被激活,然后自动激活活动方法。 – kpull1

-1

状态尝试,而不是你的“标签”这个代码。它会每次显示标签时触发:

$('a[href="#subTab2"]').on('shown', function() { 
     ---- your code here ---- 
    }); 
+0

唯一不会触发的是当页面加载时标签最初处于活动状态。 – awvidmer

+0

据我所知,没有这样的事件。教育我,如果有的话? –

+0

对不起,使用Twitter Bootstrap太多了。 :) jQuery是“秀”。 http://api.jqueryui.com/tabs/#option-show – awvidmer