Reputation: 3080
I'm trying to dynamically add a extra jquery tab to the page and then go to that tab.
I am putting the new tab in just before the last tab (as in the real world example I am actually using the last tab as a button to create the new tab)
For some reason IE8 gets very confused and puts content into the new tab you create which is the html of all the tabs (titles, content etc)
any ideas why this might be happening?
Upvotes: 0
Views: 555
Reputation: 79830
You should tabs add method to go to the newly added tab. Also you need to properly set the tab content href and the content. See below,
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);
});
Upvotes: 1