Changing content of a div with Prototype or JavaScript

I have this code :

<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>

If I press on the button with navigator_2, navigator_content_1 must be hidden, and navigator_content_2 showed.

How can I开发者_运维问答 do this with prototype? (Or javascript if it's too stronger). Unfortunatly I can't use jQuery.

Try this

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

Add onclick="nav(this)" to each button element.

Here is my suggestion:

1. Give the container holding the buttons in ID (for convenience).
2. Change the IDs of the content containers from navigator_content_1 to navigator_1_content (again, for convenience).

Then all you have to do is to keep a reference to the currently showed content pane and you have to attach a click handler to the container holding the buttons:

// 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';          
};

This makes use of event bubbling. event.target has a reference to the element that was actually clicked (I don't know if the Safari bug is still present, you might have to traverse the DOM up to find the correct element). This can certainly be improved but should give you a good start. You can easily add new buttons / content panels without having to modify the code.

Here is a DEMO.

To learn more about event handling, I suggest to have a look at the excellent articles at quirksmode.org

This would use prototype and get what you want

$$('.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/

THIS solution would work even if you add more buttons / contents without changing any line in the javascript (just add the html part!)