如何在Javascript中创建选项卡式界面

我正在尝试用Javascript创建一个选项卡式界面，它允许用户单击每个界面顶部的按钮，以使其下的div变为活动状态，而其他“tabs”/div则退到后台。我不太确定我说的对不对，所以附上一张我正试图制作的截图：

我的代码在第一个div旁边附加了一个按钮，而不是所有三个按钮，并返回一个错误，该错误表示

nodeChildren[j]。getAttribute（“data tabname”）不是函数

，尽管据我所知，它似乎是函数

我将发布我的JavaScript代码，然后添加一个链接，链接到fiddle的所有内容

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"));

函数asTabs（节点）{
var button=document.createElement（“按钮”）；
var tempArray=[]；
var nodeChildren=Array.prototype.slice.call（node.childNodes）；
nodeChildren.filter（函数（）{
for（变量i=0；i

下面是我的提琴，里面有一些注释，解释了每一行要达到的目标

---

您可以使用jquery.ui@Bindrid中的选项卡快速完成这项工作。可能是的。但我正试图用JavaScript来实现这一点。我改进了我的代码，直到现在。不返回错误，也不起作用。如果有人能做到这一点，我真的很感激你能用jquery.ui@Bindrid中的标签快速做到这一点——也许是的。但我正试图用JavaScript来实现这一点。我改进了我的代码，直到现在。不返回错误，也不起作用。如果有人能胜任，我将非常感激