問題が発生しました。
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」をクリックした場合。メインタブを変更しました。ユーザーを 2 番目のタブに移動します。次に、subTab2 の 2 番目のタブをアクティブにし、タブが以前にアクティブでない場合、これにより 2 番目のタブがアクティブになり、アクティブ化イベントが発生します
ここに問題があります。ユーザーがそれを 2 回行った場合、2 回目には activate イベントが発生しません。フロントエントにいくつかのコードを記録/入力するには、そのイベントが必要です。
私は自分の機能でそれを行うことはできません。