javascript做的tab页切换问题

Question

<div id="tabarea">

    <ul class="clearFix">

        <li>aaaaaaaaaa</li>

        <li>bbbbbbbbbb</li>

        <li>cccccccccc</li>

        <li>dddddddddd</li>

    </ul>

    <div class="box active">1</div>

    <div class="box">2</div>

    <div class="box">3</div>

    <div class="box">4</div>

</div>

<script>

function tab(){

    var eleId = document.getElementById("tabarea");

    var li = eleId.getElementsByTagName("li");

    var div = eleId.getElementsByTagName("div");

    for(var i=0;i<li.length;i++){

        li[i].onclick = function(){

            for(var j=0; j<li.length; j++) {

                if (this == li[j]) {

                    li[j].className = "on";

                    div[j].className = "box active";

                }

                else {

                    li[j].className = "";

                    div[j].className = "box";                }

            }

        }

    }

}

tab();

</script>

有一处不明白的地方,点击li[i]的时候js怎么给第div[i]添加classname的