Question

我正在创建一个用户添加标签并放入其内容的网络应用程序。此选项卡是动态创建的。我在谷歌搜索它并试图给出解决方案，但它们都没有为我工作。所以我在这里发了一个问题。

我的代码是：

<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。

问题是新选项卡未激活/已选中。我必须手动点击该标签才能激活它。

Answer 1

标签的标记错误

＆＃13;

$('#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++;

})

＆＃13;

<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>

＆＃13;

显示动态添加的标签jquery标签

1 个答案: