在 Javascript 选项卡内创建页面 - Link 不起作用

Question

我有一个带制表符的 HTML，基于这个例子：

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

我想做的是在每个选项卡中创建子页面。选项卡文本底部的箭头 link 将您带到当前选项卡 div.

中的更多文本

它在 HTML 中有效，但当我尝试使用 Javascript 创建相同的元素时，它不起作用。然后 link 根本不起作用。

你可以明白我的意思： 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);                
}

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

Answer 1

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

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

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

在 Javascript 选项卡内创建页面 - Link 不起作用

Creating pages within tabs with Javascript - Link not working

html

javascript

tabs

dom