选项卡小部件难度 - 新选项卡 Div 文本显示在所有选项卡中答案

【问题标题】：Tabs Widget Difficulty - New Tab Div Text Shows in All Tabs选项卡小部件难度 - 新选项卡 Div 文本显示在所有选项卡中
【发布时间】：2014-06-04 20:12:06
【问题描述】：

我刚刚了解了选项卡小部件，并制作了一个快速代码块，当单击“添加选项卡”按钮时添加一个选项卡，并在单击“删除选项卡”按钮时删除一个选项卡。我使用“Projquery”一书作为参考。不幸的是，每当单击“添加选项卡”按钮而不是仅添加一个带有内容的选项卡时，它也会将新选项卡的内容添加到所有前面的选项卡中。我检查了语法 12 次，但无济于事。肯定会得到一个答案:)

问题 - 按钮向旧选项卡添加内容和 div 文本的新选项卡，这是不应该的

  <script type="text/javascript">
  $(document).ready(function(){
   $("#tabs").tabs();

   $("button").button().click(function(e){
    var tabsElem = $("#tabs");
    if(this.id == "add"){
       var tabID = tabsElem.children("div").length + 1;
       tabsElem.children("ul").append($("<li>").append($("<a>")
        .attr("href","#Tab " + tabID).text("Tab " + tabID)));
        $("<div>").attr("id","Tab" + tabID).text("Cotent for given tab number " 
            + tabID +", and BAM").appendTo(tabsElem);
    }else{
        tabsElem.children("div").first().remove();
        tabsElem.find("li").first().remove();
    }
    tabsElem.tabs("refresh");

   });
})
</script>
<body>
<div id = "tabs">
  <ul>
     <li><a href="#Tab1">Tab 1</a></li>
     <li><a href="#Tab2">Tab 2</a></li>
     <li><a href="#Tab3">Tab 3</a></li>
  </ul>
  <div id ="Tab1">Mad Content Don'tcha Y'know</div>
  <div id = "Tab2">Welcome to the free world, you hear</div>
  <div id = "Tab3">Last Time For Now</div>
</div>
<br />
<div id = "button" class = "ui-widget">
  <button id = "add">Add Tab!!!</button>
  <button id = "remove">Remove Tab!!!</button>
</div>
</body>
</html>

注意 - 为简洁起见，我省略了带有 jquery/css 链接的 head 标签

【问题讨论】：

标签： jquery html jquery-ui tabs

【解决方案1】：

也许你需要检查一个面包师的语法十几次；）

问题是您对锚 href 属性的设置：

.attr("href","#Tab " + tabID)

注意“#Tab”和与之连接的“tabID”之间的空格；这会导致“Tab 4”、“Tab 5”等的 href 属性。问题是您新创建的 DIV 没有所说的空间（还有一件好事 - 每个 ID 中的空格不是有效字符HTML spec):

$("<div>").attr("id","Tab" + tabID)

我确认修复附加锚上的“href”设置解决了这里的问题：http://jsfiddle.net/2bxJ6/1/

【讨论】：

太棒了，谢谢 :) 它解决了这个问题，但是在删除一个选项卡然后添加一个选项卡后，一切都再次陷入困境，同样的问题发生了
删除时看到的结果，然后添加一个 Tab 只是这一行“var tabID = tabsElem.children('div').length + 1;”的函数。这是因为您使用现有选项卡的计数加一来确定新选项卡的 ID - 但是如果已经有一个具有该 ID 的选项卡，那么您现在有一个欺骗，导致奇怪的行为。考虑这个更新的 jsFiddle，它在 #tabs 元素上使用自定义 .data() 属性以确保 ID 永远不会重复：jsfiddle.net/2bxJ6/5
是的，我在发帖后才意识到这一点，感谢您的解释、更新的代码和答案，您帮了大忙:)