使用 Javascript 在选项卡中创建页面 - 链接不起作用答案

【问题标题】：Creating pages within tabs with Javascript - Link not working使用 Javascript 在选项卡中创建页面 - 链接不起作用
【发布时间】：2015-05-09 20:11:40
【问题描述】：

我有一个带有标签的 HTML，基于这个例子：

http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery

我想要做的是在每个标签中创建子页面。标签文本底部的箭头将您链接到当前标签的 div 中的更多文本。

它可以在 HTML 中使用，但是当我尝试使用 Javascript 创建相同的元素时，它就不行了。然后链接根本不起作用。

您可以在这里看到我的意思： http://codepen.io/anon/pen/gpPREB

我使用的 Javascript 是

function createArrow () {
var ap = document.createElement("ul");
  ap.className = "tab-links";
  var a = document.createElement("a");
  var aText = document.createTextNode("> new arrow to tab 1, pg 2");
  a.appendChild(aText)
  a.title = "Next";
  a.href = "#tab-1-pg-2";
  ap.appendChild(a);
  document.getElementById("tab-1").appendChild(ap);                
}

关于为什么链接不起作用的任何想法，即使它与直接在 HTML 中创建的链接相同？

【问题讨论】：

标签： javascript html dom tabs

【解决方案1】：

如果我理解您的问题...尝试更改要委派的点击事件处理程序。

jQuery('.tabs').on('click', ' .tab-links a', function(e) {

最初绑定事件处理程序时.tab-links不存在，因此需要将其委托给父.tabs 参考：http://api.jquery.com/on/#direct-and-delegated-events

【讨论】：