| 网站首页 | 业界新闻 | 小组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
共有 491 人关注过本帖
标题:分析JavaScript程序运行结果不知道对不-----引用别人的代码
只看楼主 加入收藏
chaiyesong
Rank: 2
等 级:论坛游民
威 望:3
帖 子:70
专家分:44
注 册:2014-5-14
结帖率:77.78%
收藏
已结贴  问题点数:1 回复次数:2 
分析JavaScript程序运行结果不知道对不-----引用别人的代码
/**
 * 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");
}

搜索更多相关主题的帖子: function document return 标签 
2015-02-05 15:55
chaiyesong
Rank: 2
等 级:论坛游民
威 望:3
帖 子:70
专家分:44
注 册:2014-5-14
收藏
得分:0 
回复 楼主 chaiyesong
这是图1:初始的加载的界面

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

附件: 游客没有浏览附件的权限,请 登录注册
2015-02-05 15:57
渴望做梦
Rank: 1
等 级:新手上路
威 望:1
帖 子:45
专家分:1
注 册:2014-12-24
收藏
得分:1 
我比较好奇的是这个css效果是怎么做出来的
2015-02-12 10:43
快速回复:分析JavaScript程序运行结果不知道对不-----引用别人的代码
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.054542 second(s), 8 queries.
Copyright©2004-2020, BCCN.NET, All Rights Reserved