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的

Answer 1

楼主问的是代码啥意思？
点击当前li元素时给当前li添加className，同时移除先前添加的其他li的classMame。

Answer 2

li标签和div标签是一一对应的，比如说，点击第一个li标签就显示第一个div标签，然后其他的li标签和div标签就被隐藏起来，这样就可以实现tab和tab对应的内容切换了

Answer 3

给每个li绑定onclick事件后，当你点击某个li节点，那么onclick里的this指向的就是你点击的那个li节点了。
然后对li这个数组就行遍历，寻找到你当前点击的那个li节点的[下标]。
而li和div是一一对应的，使用你找到的[下标]就可以对div进行操作了。

Answer 4

你这为啥不用事件代理，这样写不觉得很烦么

Answer 5

两个for啊。。。。

Answer 6

$("#tabarea li").click(function(){
    $(this).index() //这里就是li的序号
})