ページにjqueryタブを動的に追加してから、そのタブに移動しようとしています。
最後のタブの直前に新しいタブを配置しています(実際の例のように、実際には最後のタブをボタンとして使用して新しいタブを作成しています)
何らかの理由で、IE8は非常に混乱し、作成した新しいタブにコンテンツを配置します。これは、すべてのタブ(タイトル、コンテンツなど)のhtmlです。
なぜこれが起こっているのか考えていますか?
ページにjqueryタブを動的に追加してから、そのタブに移動しようとしています。
最後のタブの直前に新しいタブを配置しています(実際の例のように、実際には最後のタブをボタンとして使用して新しいタブを作成しています)
何らかの理由で、IE8は非常に混乱し、作成した新しいタブにコンテンツを配置します。これは、すべてのタブ(タイトル、コンテンツなど)のhtmlです。
なぜこれが起こっているのか考えていますか?
新しく追加されたタブに移動するには、タブにメソッドを追加する必要があります。また、タブコンテンツのhrefとコンテンツを適切に設定する必要があります。下記参照、
var $tabs = $('#tabs');
$tabs.tabs({
tabTemplate: '<li><a href="#{href}">#{label}</a></li>',
add: function( event, ui ) {
$tabs.tabs( "option", "selected", ui.index );
var tabCount = $tabs.tabs("length");
$(ui.panel).append('<div id="#Delivery"'+ tabCount +'>New Tab Content ' + tabCount + '</p>');
}
});
$('#addtab').click(function() {
var tabCount = $tabs.tabs("length");
$tabs.tabs("add", "#Delivery" + tabCount, "Delivery " + tabCount, tabCount-1);
});