Question

我有this代码：

<div class="box_container">
    <div class="box_container_button" id="navigator_1">
        Button 1
    </div>

    <div class="box_container_button" id="navigator_2">
        Button 2
    </div>

    <div class="box_container_button" id="navigator_3">
        Button 3
    </div>

    <div class="box_container_content" style="background-color:#d5d5d5;" id="navigator_content_1">
        Content 1               
    </div> 

    <div class="box_container_content" style="background-color:#00aeef; display:none;" id="navigator_content_2">
        Content 2              
    </div>

    <div class="box_container_content" style="background-color:#4db848; display:none;" id="navigator_content_3">
        Content 3               
    </div>               
</div>

如果我按下带有navigator_2的按钮，则必须隐藏navigator_content_1，并显示navigator_content_2。

我怎么能用原型做到这一点？（或者javascript，如果它太强大了）。不幸的是，我无法使用jQuery。

Answer 1

试试这个

function nav(obj)
{
    document.getElementById("navigator_content_1").style.display = "hidden"
    document.getElementById("navigator_content_2").style.display = "hidden"
    document.getElementById("navigator_content_3").style.display = "hidden"

    obj.style.display = "none";
}

为每个按钮元素添加onclick="nav(this)"。

Answer 2

这是我的建议：

将容器中的按钮包含在ID中（为方便起见）。
将内容容器的ID从navigator_content_1更改为navigator_1_content（为方便起见，再次）。

然后，您所要做的就是保持对当前显示的内容窗格的引用，并且您必须将单击处理程序附加到容纳按钮的容器中：

// by default, the first panel is shown
var current = document.getElementById('navigator_1_content');

document.getElementById('box_container').onclick = function(event) {
    event = event || window.event;  // for IE
    var target = event.target || event.srcElement; // for IE

    current.style.display = 'none';
    current = document.getElementById(target.id + '_content');
    current.style.display = 'block';          
};

这使用了event bubbling。 event.target引用了实际单击的元素（我不知道Safari bug是否仍然存在，您可能必须遍历DOM才能找到正确的元素）。这当然可以改善，但应该给你一个良好的开端。您可以轻松添加新按钮/内容面板，而无需修改代码。

这是DEMO。

要了解有关事件处理的更多信息，建议您查看excellent articles at quirksmode.org

Answer 3

这会使用原型并获得你想要的东西

$$('.box_container_button').each(function(element) {
    element.observe('click', function(event) {
        $$('.box_container_content').each(function(element) {
            element.setStyle({
                'display': 'none'
            });
        });
        $('navigator_content_' + this.id.replace("navigator_", "")).setStyle({
            'display': 'block'
        });
    });
});

http://jsfiddle.net/VENLh/

这个解决方案即使您添加更多按钮/内容而不更改javascript中的任何行也是有效的（只需添加html部分！）

使用Prototype或JavaScript更改div的内容

3 个答案: