/**
 * tabs
 * @author   橡树小屋
 */
var tabs=function(){
    /*返回元素或者元素的集合*/
    /*返回指定元素或文档对象下面指定的标签名字的元素的集合*/
    function tag(name,elem){
        return (elem||document).getElementsByTagName(name);/*返回标签元素集合*/
    }
    //获得相应ID的元素
    function id(name){
        return document.getElementById(name);
    }
    /*返回指定的元素的第一个字元素或指定元素的下一个兄弟元素*/
    function first(elem){
        elem=elem.firstChild;
        return elem&&elem.nodeType==1? elem:next(elem);
    }
    function next(elem){
        do{
            elem=elem.nextSibling;   
        }while(elem&&elem.nodeType!=1);
        return elem;
    }
    return {
        set:function(elemId,tabId){
            var elem=tag("li",id(elemId));/*获取的是li元素节点*/
            var tabs=tag("div",id(tabId));/*获取的是li元素节点对应的div显示内容的节点*/
            var listNum=elem.length;/*计算li元素的数量*/
            var tabNum=tabs.length;/*计算div显示内容的数量*/
            /*外层循环检查用户是否点击相应的li元素*/
            for(var i=0;i<listNum;i++){
                    /*每一个li元素对应的点击事件*/
                    elem[i].onclick=(
                        /*封装特性*/
                        /*先行执行完毕将执行的结果赋值给onclick的事件，但是如果onclick事件没有触发的话，此功能将不会执行到*/
                        function(i){
                            return function(){
                                /*内层循环将相应的li元素对应的内容显示出来*/
                                for(var j=0;j<tabNum;j++){
                                    if(i==j){
                                        /*将选中的节点的样式改为block*/
                                        tabs[j].style.display="block";
                                        //alert(elem[j].firstChild.nodeType);//测试节点
                                        /*改变类名字*/
                                        elem[j].firstChild.className="selected";
                                    }
                                    else{
                                        tabs[j].style.display="none";
                                        elem[j].firstChild.className="";
                                    }
                                }
                            }
                        }
                    )(i)
            }
        }
    }
}();
window.onload=function(){
    tabs.set("nav","menu_con");
}

这是图1：初始的加载的界面

这是图2：点击按钮后的效果

我比较好奇的是这个css效果是怎么做出来的