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

Question

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

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

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

classlist[0]

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

Answer 1

我用如何使用 data-* 属性来更新你的 fiddle :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
    });
}