Question

我正在尝试在Jquery选项卡中添加撤消/重做功能。我可以存储和恢复添加/删除选项卡的li / div。

问题是当我重新添加选项卡到表单时，虽然它被正确添加，因为li和div存在并且可以看到该特定选项卡。但如果我点击该标签'tabsselect'事件没有被解雇。标签的Li和div按顺序查看。但我无法弄清楚遗失的是什么。

在我的网站中，我动态添加和删除标签，它工作正常但只是读取一次删除的标签无法正常工作

以下是添加标签的代码

 var $tabs = $("#tabs").tabs({
                    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span id='id1' class='ui-icon ui-icon-close'>Remove Tab</span></li>",
                    add: function (event, ui) {
                        var tab_content = $tab_content_input.val(); // || "Tab " + tab_counter + " content.";

                    }
                });

这是删除代码

$("#tabs span.ui-icon-close").live("click", function () {
                    if (imode == 1) {
                        var index = $("li", $tabs).index($(this).parent());
                        if ($tabs.tabs("length") > 1) {
                           $tabs.tabs("remove", index);
                           }
                    }
                });

没什么好看的。寻找答案。感谢

Answer 1

尝试使用此代码，这将为您提供一个使用jquery在选项卡中操作数据的好例子。

<强>的JavaScript

  $(document).ready(function(){   
var $tabs = $('#tabs').tabs();

var $a = $('<a />').appendTo('body').attr('href','#').html('add new tab').click(function(){
  var n = parseInt($tabs.tabs( "length" ),10)+1;
      $('body').append('<div id="tabs-'+n+'">content for the tab # '+ n +'</div>');

        $tabs.tabs("add",'#tabs-'+n,'Tab #'+n);
  return false;

});

    $('<a/>').html('<br><br>remove tab').attr('href','#').click(function(){

      $tabs.tabs('remove',$tabs.tabs('length')-1);
      return false;
    }).appendTo('body');

  });

<强> HTML

<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>
</body>
</html>

* 只需使用所选标签的id并操纵其中的数据即可。这将允许添加和删除页面上的选项卡 *

标签选择功能

$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
     ui.options // options used to intialize this widget
     ui.tab // anchor element of the selected (clicked) tab
     ui.panel // element, that contains the contents of the selected (clicked) tab
     ui.index // zero-based index of the selected (clicked) tab
 });

使用ui.index获取所选标签的索引，然后添加然后操作所选标签。

Jquery选项卡重新添加

1 个答案: