关于js选项卡的一些问题

题主昨晚突然想做个选项卡，没错，就是很简单很简单又很小白的选项卡。。在题主把相应的代码都敲出来的时候，麻烦就也来了。。

   Js一直报错，“Uncaught TypeError: Cannot set property 'className' of undefined“，捕获错误，className属性未定义，题主就看着这个错误信息使劲

找bug，然后2个小时过去还是没找到。

上代码：

<script type="text/javascript">
    //新闻选项卡
    window.onload=function(){
        var f1 = document.getElementById("contentAA");
        var f3 = f1.children;
        var d1 = document.getElementById("BUL");
        var d3 = d1.children;
        var len = f3.length;
        //alert(len);  3

        for(var i= 0;i<len;i++){
            f3[i].index = i;
            f3[i].onclick = function() {
                for(var n= 0;n<len;n++){
                    //alert(1);不报错
                    f3[n].className = "";
                   // alert(1);不报错
                    d3[n].className ="hide";
                }
                this.className = "on";
                d3[this.index].className = "";
            }
        }

    };
</script>

/*出现undefined className的原因是各个浏览器对于子节点有关，在IE下childNodes取得的节点不包括文本节点，
而在Chrome或Firefox下得到的节点包括文本节点，故在chrome中，我们采用ul.children来获取子li的节点。*/
/*举个栗子
* var f1 = document.getElementById("contentAA");  获取ul的对象
 var f3 = f1.children;   获取ul下面的li的对象
 var d1 = document.getElementById("BUL"); 同上
 var d3 = d1.children;
 var len = f3.length;
* */

基本就是这样，是找子节点出的问题，换成children之后就迎刃而解了。

在此记录一下，做个笔记。