Javascript - 在循环内引用某些 HTML 元素

Question

我正在制作一个简单的 Javascript 菜单，它可以在主要包含 HTML 表单和文本的选项卡之间切换。 为此，我使用以下代码将单击属性分配给更改类样式设置的列表元素：
http://jsfiddle.net/NHKZL/
这种情况下的问题是代码通过遍历类列表来查找要打开/关闭的元素（容器> .class）来跟踪菜单内容。这在每个选项卡中使用纯文本时效果很好，但在使用不同内容（如 php 回显和循环）时效果较差。我认为这是由于 JS 考虑了其中一些标签类。
这是代码行：

var target = document.querySelector('.container>.' + e.target.classList[0]);

我正在寻找替代品的特别部分是：

类列表[0]

发布代码的人指出了这个弱点并建议使用 data-* 来跟踪我希望影响的元素，但我似乎无法弄清楚这会如何影响此特定行中的其余语法.我的解决方案的另一半目前包括向容器类内部的类添加 data-* 属性。
欢迎任何其他有关如何执行此操作的建议。

Answer 1

我更新你的小提琴如何使用 data-* 属性：http://jsfiddle.net/NHKZL/441/

HTML，添加数据索引属性：

<ul class="menu">
    <li class="toggle1" data-index="1">One</li>
    <li class="toggle2" data-index="2">Two</li>
    <li class="toggle3" data-index="3">Three</li>
    <li class="toggle4" data-index="4">Four</li>
    <li class="toggle5" data-index="5">Five</li>
</ul>
<div class="container">
    <div class="toggle1" data-index="1">Here are the contents of 1.</div>
    <div class="toggle2" data-index="2">Here are the contents of 2..</div>
    <div class="toggle3" data-index="3">Here are the contents of 3...</div>
    <div class="toggle4" data-index="4">Here are the contents of 4....</div>
    <div class="toggle5" data-index="5">Here are the contents of 5.....</div>
</div>

JS，请注意在选择器中我选择了具有相同数据索引号的容器的子元素：

var menu_elements = document.querySelectorAll('.menu>li'),
    menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
    menu_elements[i].addEventListener('click', function (e) {
        var target = document.querySelector('.container> [data-index="' + e.target.getAttribute("data-index")+'"]'); // clicked element
        Array.prototype.filter.call(target.parentNode.children, function (siblings) {
            siblings.style.display = 'none'; // hide sibling elements
        });
        target.style.display = 'block'; // show clicked element
    });
}