Ajax Presentation

<div id="container">
    <div id="one">
        <a href="javascript:lol(0)">Home</a> |
        <a href="javascript:lol(1)">Page</a> |
        <a href="javascript:lol(2)">Setting</a>
        <div id="logout" style="display:inline; float: right; ">
            <a href="javascript:">Log Out</a>
        </div>
    </div>
    <div id="two">

    </div>
    <div id="three" style="width: 100%; height: 50px;">

    </div>

</div>

<style>
    div { margin: 0px; }
    body { font-family: arial; font-size: 12px; }
    a { text-decoration: none; }
    a:hover { text-decoration: underline; }
    #one { border-bottom: 1px solid #af5; padding: 0 0 3 0px;
    margin: 0 0 5 0px; }

</style>

<script>

var home = [
    "<a href=\"javascript:enter('fuchsia')\">Indonesia</a> | "
    +"<a href=\"javascript:enter('red')\">Malaysia</a> | "
    +"<a href=\"javascript:enter('cornsilk')\">Filipine</a>",

    "<a href=\"javascript:enter('pink')\">New Page</a> | "
    +"<a href=\"javascript:enter('yellow')\">Edit Page</a>",

    "<a href=\"javascript:enter('brown')\">Template</a> | "
    +"<a href=\"javascript:enter('lime')\">Layout</a>"
    ];

function lol(p){
    for(i=0;i<home.length;i++){
        if(i==p)
            document.getElementById('two').innerHTML = home[i];
    }

} 

function enter(dd){
    document.body.style.backgroundColor = dd;
}

</script>