如何在Javascript

Question

我试图在javascript中创建一个标签式界面，允许用户点击每个界面上方的按钮，以使其下方的div变为活动状态，而其他界面则为＃39; / divs退回到后台。我不太确定我把它弄好了所以附上是我试图制作的屏幕截图

我的代码附加了一个按钮 - 在第一个div旁边 - 而不是全部三个，并返回一个错误，显示为nodeChildren[j].getAttribute("data-tabname") is not a function，尽管据我所知，它似乎是。

我会发布我的JavaScript代码，然后添加一个链接到小提琴的所有内容。非常感谢!!

function asTabs(node) {
var button = document.createElement("BUTTON");
var tempArray = [];
var nodeChildren = Array.prototype.slice.call(node.childNodes);

nodeChildren.filter(function(){
for (var i = 0; i < nodeChildren.length; i++) {
if (nodeChildren[i].nodeType === 1) {
tempArray += nodeChildren[i];
return tempArray;
}
}
});
nodeChildren.forEach(function (){
for (var j = 0; j < nodeChildren.length; j++) {
node.insertBefore(button, nodeChildren[j]);
var buttons = document.getElementsByTagName("button");
for (var k = 0; k < buttons.length; k++) {
buttons[k].innerHTML = nodeChildren[j].getAttribute("data-tabname").textContent;
}
}
});

var hide = nodeChildren.slice(1);
for (var l = 0; l < hide.length; l++) {
hide[l].className = "hide";
}
buttons[k].addEventListener("click", function (){
if (nodeChildren[j].className = "") {
nodeChildren[j].className = "hide";
}
else nodeChildren[j].className = "";
});
  }
  asTabs(document.querySelector("#wrapper"));

然后，这里有我的小提琴，其中包含解释在每一行上尝试实现的内容      https://jsfiddle.net/nmeri17/nmswdota/