Question

我有一个带有标签的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中直接创建的链接相同？

Answer 1

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

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

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

使用Javascript在选项卡中创建页面 - 链接无效

1 个答案: