请教一个JS的问题

望火的飞蛾 2014-01-22 11:44:08
<html>

<head>

<title>简单的文件树效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.tree{width:200px;border:2px inset #fff;height:400px;padding:5px;overflow:auto;}

.tree dd,.tree dt, .tree dl{margin:0;padding:0;overflow:hidden;}

.tree dd{margin-left:18px;}

.tree dt{background:url(http://www.codefans.net/jscss/demoimg/201111/tree-bg.png) no-repeat 0 0px;padding-left:35px;line-height :20px;height:20px;}

.tree dt.node-close{background-position: 0 -24px;}

.tree dt.node-open{background-position: 0 -58px;}

.tree dt a{color:#000;text-decoration:none;font: 12px/1 verdana;line-height :12px;_line-height :16px;}

.tree dt a:hover{background:#0A246A;color:#fff;}

</style>

</head>

<body>

<div id="esunTree" class="tree"></div>

</body>

<script type="text/javascript">

try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

function Tree(data, el) {

this.app=function(par,tag){return par.appendChild(document.createElement(tag))};

this.create(document.getElementById(el),data)

};

Tree.fn = Tree.prototype = {

create: function (par,group){

var host=this, length = group.length;

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

var dl =this.app(par,'DL'), dt = this.app(dl,'DT'), dd = this.app(dl,'DD');

dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>';

if (!group[i]['s'])continue;

dt.group=group[i]['s'];

dt.className+=" node-close";

dt.onclick=function (){

var dd= this.nextSibling;

if (!dd.hasChildNodes()){

host.create(dd,this.group);

this.className='node-open'

}else{

var set=dd.style.display=='none'?['','node-open']:['none','node-close'];

dd.style.display=set[0];

this.className=set[1]

}

}

}

}

};

var data=[{

t:'腾讯网络限公司',s:[

{t:'人力资源',s:[{t:'张A'}]},

{t:'风险控制',s:[{t:'李B'},{t:'赵C'},{t:'吴D'},{t:'司马E'},{t:'潭F'},{t:'袁G'}]},

{t:'系统平台',s:[{t:'资讯组',s:[{t:'王五'}]},{t:'游戏组',s:[{t:'肖十三'}]}]}

]

},

{t:'拍拍网',s:[{t:'胡一刀'}]},

{t:'盛大网络',s:[{t:'热血传奇',s:[{t:'在线充值'}]},{t:'陈天桥'}]},

{t:'新浪微博',s:[{t:'凤姐'}]}

];

var et=new Tree(data,'esunTree');

//]]>

</script>

</html>
这个树形目录中，我想给“张A"加上一个超链接，怎么弄才能成功？
...全文
206 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
望火的飞蛾 2014-01-22
  • 打赏
  • 举报
 回复
引用 1 楼 kendyjack 的回复:
dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>'; 改为 dt.innerHTML='<a href="'+(group[i]['links']?group[i]['links']:('javascript:void(0)'))+'">'+group[i]['t']+'</a>'; 然后 {t:'人力资源',s:[{t:'张A',links:"http://www.google.com.hk/"}]}, 这里加上你要的链接
这个可以用，还有个问题，能不能再帮我改下：当一个展开时，另一个自动闭合？
人生难得一只鸡 2014-01-22
  • 打赏
  • 举报
 回复
扩展角度来讲，应该从数据源入手，如下 将张A 李B 加上百度链接，加链接只需加 自定义属性link 
<html>

<head>

<title>简单的文件树效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.tree{width:200px;border:2px inset #fff;height:400px;padding:5px;overflow:auto;}

.tree dd,.tree dt, .tree dl{margin:0;padding:0;overflow:hidden;}

.tree dd{margin-left:18px;}

.tree dt{background:url(http://www.codefans.net/jscss/demoimg/201111/tree-bg.png) no-repeat 0 0px;padding-left:35px;line-height :20px;height:20px;}

.tree dt.node-close{background-position: 0 -24px;}

.tree dt.node-open{background-position: 0 -58px;}

.tree dt a{color:#000;text-decoration:none;font: 12px/1 verdana;line-height :12px;_line-height :16px;}

.tree dt a:hover{background:#0A246A;color:#fff;}

</style>

</head>

<body>

<div id="esunTree" class="tree"></div>

</body>

<script type="text/javascript">

try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

function Tree(data, el) {

    this.app=function(par,tag){return par.appendChild(document.createElement(tag))};

    this.create(document.getElementById(el),data)

};

Tree.fn = Tree.prototype = {

    create: function (par,group){

        var host=this, length = group.length;

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

            var dl =this.app(par,'DL'), dt = this.app(dl,'DT'), dd = this.app(dl,'DD');
			var link=group[i].link?group[i].link:'javascript:void(0)';
            dt.innerHTML='<a href="'+link+'">'+group[i].t+'</a>';

            if (!group[i]['s'])continue;

            dt.group=group[i]['s'];

            dt.className+=" node-close";

            dt.onclick=function (){

                var dd= this.nextSibling;

                if (!dd.hasChildNodes()){

                     host.create(dd,this.group);

                     this.className='node-open'

                 }else{

                    var set=dd.style.display=='none'?['','node-open']:['none','node-close'];

                     dd.style.display=set[0];

                     this.className=set[1]

                 }

            }

        }

    }

};

var data=[{

        t:'腾讯网络限公司',s:[

            {t:'人力资源',s:[{t:'张A',link:'http://www.baidu.com'}]},

            {t:'风险控制',s:[{t:'李B',link:'http://www.baidu.com'},{t:'赵C'},{t:'吴D'},{t:'司马E'},{t:'潭F'},{t:'袁G'}]},

            {t:'系统平台',s:[{t:'资讯组',s:[{t:'王五'}]},{t:'游戏组',s:[{t:'肖十三'}]}]}

        ]

    },

    {t:'拍拍网',s:[{t:'胡一刀'}]},

    {t:'盛大网络',s:[{t:'热血传奇',s:[{t:'在线充值'}]},{t:'陈天桥'}]},

    {t:'新浪微博',s:[{t:'凤姐'}]}

];

var et=new Tree(data,'esunTree');

 //]]>

</script>

</html>
hutao93 2014-01-22
  • 打赏
  • 举报
 回复 
if (group[i]['t'] === '张A') {
                    dt.innerHTML = '<a href="http://www.taobao.com" target="_bank">' + group[i]['t'] + '</a>';
                } else {
                    dt.innerHTML = '<a href="javascript:void(0)">' + group[i]['t'] + '</a>';
                }
这个意思吗？
嘻哈大咖秀 2014-01-22
  • 打赏
  • 举报
 回复
dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>'; 吧这个改下就好了
夜雨_Jason 2014-01-22
  • 打赏
  • 举报
 回复
dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>'; 改为 dt.innerHTML='<a href="'+(group[i]['links']?group[i]['links']:('javascript:void(0)'))+'">'+group[i]['t']+'</a>'; 然后 {t:'人力资源',s:[{t:'张A',links:"http://www.google.com.hk/"}]}, 这里加上你要的链接
夜雨_Jason 2014-01-22
  • 打赏
  • 举报
 回复
引用 5 楼 u010564881 的回复:
[quote=引用 1 楼 kendyjack 的回复:] dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>'; 改为 dt.innerHTML='<a href="'+(group[i]['links']?group[i]['links']:('javascript:void(0)'))+'">'+group[i]['t']+'</a>'; 然后 {t:'人力资源',s:[{t:'张A',links:"http://www.google.com.hk/"}]}, 这里加上你要的链接
这个可以用，还有个问题，能不能再帮我改下：当一个展开时，另一个自动闭合？[/quote] 

<html>

<head>

<title>简单的文件树效果</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

.tree{width:200px;border:2px inset #fff;height:400px;padding:5px;overflow:auto;}

.tree dd,.tree dt, .tree dl{margin:0;padding:0;overflow:hidden;}

.tree dd{margin-left:18px;}

.tree dt{background:url(http://www.codefans.net/jscss/demoimg/201111/tree-bg.png) no-repeat 0 0px;padding-left:35px;line-height :20px;height:20px;}

.tree dt.node-close{background-position: 0 -24px;}

.tree dt.node-open{background-position: 0 -58px;}

.tree dt a{color:#000;text-decoration:none;font: 12px/1 verdana;line-height :12px;_line-height :16px;}

.tree dt a:hover{background:#0A246A;color:#fff;}

</style>

</head>

<body>

<div id="esunTree" class="tree"></div>

</body>

<script type="text/javascript">

try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

function Tree(data, el) {

    this.app=function(par,tag){return par.appendChild(document.createElement(tag))};

    this.create(document.getElementById(el),data)

};

Tree.fn = Tree.prototype = {

    create: function (par,group){

        var host=this, length = group.length;

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

            var dl =this.app(par,'DL'), dt = this.app(dl,'DT'), dd = this.app(dl,'DD');

            //dt.innerHTML='<a href="javascript:void(0)">'+group[i]['t']+'</a>';
            dt.innerHTML='<a href="'+(group[i]['links']?group[i]['links']:('javascript:void(0)'))+'">'+group[i]['t']+'</a>';

            if (!group[i]['s'])continue;

            dt.group=group[i]['s'];

            dt.className+=" node-close";

            dt.onclick=function (){
            	var iThis = this;
            	var aDt = this.parentNode.parentNode.childNodes;
            	for(var i=0; i<aDt.length; i++){
                	if(aDt[i].nodeName.toLowerCase()=="dl" && aDt[i].getElementsByTagName("dt")[0]!=iThis && aDt[i].getElementsByTagName("dd")[0].innerHTML !=""){
                		aDt[i].getElementsByTagName("dt")[0].className = "node-close";
                		aDt[i].getElementsByTagName("dd")[0].style.display = "none";
                		
                	}
                }
                
				
                var dd= this.nextSibling;
               
                if (!dd.hasChildNodes()){

                     host.create(dd,this.group);

                     this.className='node-open';
                     dd.style.display = "block";

                 }else{
                    var set=dd.style.display=='none'?['block','node-open']:['none','node-close'];

                    dd.style.display=set[0];

                    this.className=set[1]
                }
				


            }

        }

    }

};

var data=[{

        t:'腾讯网络限公司',s:[

            {t:'人力资源',s:[{t:'张A',links:"http://www.google.com.hk/"}]},

            {t:'风险控制',s:[{t:'李B'},{t:'赵C'},{t:'吴D'},{t:'司马E'},{t:'潭F'},{t:'袁G'}]},

            {t:'系统平台',s:[{t:'资讯组',s:[{t:'王五'}]},{t:'游戏组',s:[{t:'肖十三'}]}]}

        ]

    },

    {t:'拍拍网',s:[{t:'胡一刀'}]},

    {t:'盛大网络',s:[{t:'热血传奇',s:[{t:'在线充值'}]},{t:'陈天桥'}]},

    {t:'新浪微博',s:[{t:'凤姐'}]}

];

var et=new Tree(data,'esunTree');

 //]]>

</script>

</html>
KeepSayingNo 2014-01-22
  • 打赏
  • 举报
 回复
在展开下一个之前，把之前的闭合就行了，你要记住上一个NODE的ID
请教一个ArcGIS API for JavaScript编写中一个问题
初学，请问一下ArcGIS API for JavaScript中 请问大佬们，这些功能我为什么使用不了，哪里出错了吗 代码如下 大学 地图操作 Zoom In Zoom Out Full Extent Prev Extent Next Extent Pan Deactivate 应该是我漏了一些东西，欢迎大佬指点迷津。 作者：boolmans
websocket连接MQTT服务器所用的js文件——mqtt.js和mqtt.min.js
mqtt.js库，下载后可以用找我要源码和压缩文件（mqtt.min.js），有问题随时请教
js查询一个或多个字符对应asc码源码
高一小白自己编的查询一个或多个字符对应asc码的代码。。。 精华主要还是在清空的那个实现，改了好几次才想到== 但是还有一个问题想要请教大神就是我把这个html转化为hta时，出来下面显示的asc前的那个标识都变为undefined是什么鬼。。。
js跳转到指定的标签下
前两天领导对我说你用js给我做一个跳转到页面指定的切换标签下，我当时就疯了、、、跳你妹啊！肿么跳？、、、后来没办法，只有找百度了，可是百度也不会，我就去别的部门请教技术了、、、他给我写出这样一段代码。特此记下上传上来，希望大家可以用的到、、、
js怎么判断flash swf文件是否加载完毕
js怎么判断flash是否加载完毕了呢？ 我们怎么在flash加载完毕之时，回调一个我们设定的js函数？ 这个问题，一直困扰了我很久，直到今天，请教了一个非常牛B的人物之后，突然来了感觉！ 呵呵，也许，这个问题在你们看来不是问题，不过对于我来说，确实是个问题，因为我一直不知道该怎么判断swf文件是否加载完毕了？ 从前都是只知道img.onload等等。 好了，言归正传，我们到底该怎样判断一个flash是否加载完了呢？ 没错，就是轮询，然后判断flash的某个方法是否能正常运行？ 示例如下（伪代码）： (function () { var flash = 网页上某个flash对象。 var
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章