Javascript 为每个具有类名的div动态创建按钮，并创建单击时显示/隐藏功能

我正试图想出一个很好的解决方案来轻松添加菜单页面。 每个菜单页都应该是一个带有类“shTab”的div，为了确定它是一个显示/隐藏元素，我还想给每个div一个唯一的名称，这样我就可以创建以该名称作为文本的按钮

我使用硬编码html创建每个div，我希望jQuery函数首先获取所有div，然后放入数组选项卡中

然后，我想迭代tabs数组，并为每个div创建一个按钮，该按钮应附加到buttonContainer类，以便所有按钮都像普通菜单一样位于同一区域

我还希望为创建的每个按钮创建一个on-click函数，该函数将.hide（）所有选项卡，并最终.show（）显示属于已单击按钮的选项卡

我已经试着让它在中工作，但是我在尝试迭代div元素时遇到了问题（我认为这就是问题所在）

html

<div class='buttonContainer'>

</div>
<div class='container'>
  <div class='shTab' name='home'>
    <p>Homepage! yay</p>
  </div>
  <div class='shTab' name='contact'>
    <p>Contact page! yay</p>
  </div>
  <div class='shTab' name='images'>
    <p>no images yet :(</p>
  </div>
</div>

主页！耶

联系页面！耶

还没有图像：(

javaScript

var tabs = [];

$(document).ready(function(){

  $('div.shTab').each(function(i, obj) {
        tabs.push(obj);
  });

  for (var div in tabs) {
    div.hide();
    $('.buttonContainer').append(
            $('<button/>', {
          text: div.name,
          click: function () {
            for (var div in tabs) {
              div.hide();
            }
            this.show();
          }
      })
    );
  }

});

var选项卡=[]；
$（文档）.ready（函数（）{
$（'div.shTab'）。每个（函数（i，obj）{
按钮（obj）；
});
用于（选项卡中的var div）{
隐藏分区（）；
$（'.buttonContainer'）。追加(
$('', {
文本：div.name，
单击：函数（）{
用于（选项卡中的var div）{
隐藏分区（）；
}
this.show（）；
}
})
);
}
});

我注意到for循环中的'div'对象不能作为jQuery对象使用，.hide（），.name…等不能像我预期的那样工作

---

我做错了什么？

同样的事情，通过jQuery完成。，如果需要的话

//创建选项卡集合。。。
变量选项卡=$（'.shTab'）；
//根据选项卡本身创建按钮
对于（变量i=0；i

主页！耶

联系页面！耶

还没有图像：(

同样的事情，通过jQuery完成。，如果需要的话

//创建选项卡集合。。。
变量选项卡=$（'.shTab'）；
//根据选项卡本身创建按钮
对于（变量i=0；i

主页！耶

联系页面！耶

还没有图像：(

我通过查看所有帮助找到了答案。非常感谢

$（文档）.ready（函数（）{
var标签=[]；
$（'div.shTab'）。每个（函数（i，obj）{
tabs.push（$（obj））；
});
对于（变量i=0；i

主页！耶

联系页面！耶

还没有图像：(

我通过查看所有帮助找到了答案。非常感谢

$（文档）.ready（函数（）{
var标签=[]；
$（'div.shTab'）。每个（函数（i，obj）{
tabs.push（$（obj））；
});
对于（变量i=0；i

主页！耶

联系页面！耶

还没有图像：(

我创建了一个fiddle（）…也许有帮助。但是请注意，我不喜欢查询，所以我只使用了JavaScript。谢谢，我修改了你的代码，现在它几乎实现了我想要的功能。（）尽管如此，我还是更喜欢jQuery版本。但是…这总比什么都没有好！谢谢^^我创建了一个fiddle（）…也许有帮助