我正在创建一个web应用程序，用户在其中添加一个选项卡并放置他的内容。这些选项卡是动态创建的。我在谷歌上搜索了它，并尝试了给定的解决方案，但没有一个适合我。所以我在这里贴了一个问题。
我的代码是:<div id="tabs" class="htabs">
<a href="#tab-general"><?php echo $tab_general; ?></a>
<a onclick="addtab();" id="add-tab"><?php echo $add_tab; ?></a>
</div>
脚本是:-
<script type="text/javascript">
$('#tabs a').tabs();
var tab_count = '<?php echo $tab_count; ?>';
function addtab(){
var html = '';
$('#add-tab').before('<a href="#product-tab-'+tab_count+'" class="nearest">Tab '+tab_count+'</a>');
html += '<div id="product-tab-'+tab_count+'" class="nthDiv">';
html += '<table class="form">'
html += '<tr>';
html += '<td>';
html += 'Name'+tab_count;
html += '</td>';
html += '<td>';
html += '<input type="text">';
html += '</td>';
html += '</tr>';
html += '</table>';
html += '</div>';
$('#form').append(html);
$('#tabs a').tabs("refresh");
//$('#tabs a').tabs( "option", "selected", -1 ); tried but doesn't work
//$('#tabs a').tabs("option", "active", -1); tried but doesn't work
tab_count++;
}
</script>
我的jquery版本是jquery-1.7.1.min.js, jquery ui版本是1.8。
问题是新标签没有被激活/选中。我必须手动点击这个选项卡来激活它
你的制表符标记错误
$('#tabs').tabs({
beforeActivate: function(e, ui) {
return ui.newTab.find('#add-tab').length == 0;
}
});
var tab_count = 1;
$('#add-tab').click(function() {
var html = '';
$('#add-tab').parent().before('<li><a href="#product-tab-' + tab_count + '" class="nearest">Tab ' + tab_count + '</a></li>');
html += '<div id="product-tab-' + tab_count + '" class="nthDiv">';
html += '<table class="form">'
html += '<tr>';
html += '<td>';
html += 'Name' + tab_count;
html += '</td>';
html += '<td>';
html += '<input type="text">';
html += '</td>';
html += '</tr>';
html += '</table>';
html += '</div>';
$('#tabs').append(html);
$('#tabs').tabs("refresh").tabs("option", "active", -2);
tab_count++;
})<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="tabs" class="htabs">
<ul>
<li><a href="#tab-general">Gen</a></li>
<li><a href="#" id="add-tab">Add</a></li>
</ul>
<div id="tab-general">
tab-general
</div>
</div>