读书人
栏目▼

这个树型菜单如何给叶子加超链接啊

发布时间： 2012-03-06 20:47:55 作者： rapoo

这个树型菜单怎么给叶子加超链接啊？
代码如下，如何点击叶子节点会打开一个自定义的链接地址呢？最好在新窗体中打开。谢谢。
================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>

<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc ";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000; ";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement( "span ");
var upobj = document.createElement( "span ");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()? "hasItems ": "Items ";
innerHTML = " <img src=d:/expand.gif class=ec> " + thisn.getAttribute( "text ") + " ";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute( "cn ")){
this.setAttribute( "open ",!this.getAttribute( "open "));
this.cn.style.display = this.getAttribute( "open ")? "inline ": "none ";
this.all.tags( "img ")[0].src = this.getAttribute( "open ")? "d:/expand.gif ": "d:/contract.gif ";
}
if(IO){
IO.runtimeStyle.cssText = " ";
IO.setAttribute( "selected ",false);
}
IO = this;
this.setAttribute( "selected ",true);
this.runtimeStyle.cssText = SC;
}
onmouseover = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = " ";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}

if(thisn.getAttribute( "treeId ") != null){
upobj.setAttribute( "treeId ",thisn.getAttribute( "treeId "));
}
if(thisn.getAttribute( "href ") != null){
upobj.setAttribute( "href ",thisn.getAttribute( "href "));
}
if(thisn.getAttribute( "target ") != null){
upobj.setAttribute( "target ",thisn.getAttribute( "target "));
}

nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML( "beforeEnd ", " <br> ")



if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement( "span ");
upobj.setAttribute( "cn ",cn);
if(thisn.getAttribute( "open ") != null){
upobj.setAttribute( "open ",(thisn.getAttribute( "open ")== "true "));
upobj.getAttribute( "cn ").style.display = upobj.getAttribute( "open ")? "inline ": "none ";
if( !upobj.getAttribute( "open "))upobj.all.tags( "img ")[0].src = "d:/contract.gif ";
}

for(i=0;i <nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags( "img ")[0].src = "d:/endnode.gif ";
}
return nodeObj;
}
window.onload = initTree;
</script>

<script>
var address ;
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute( "treeId ");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version= "1.0 " encoding= "GB2312 "?>
<DSTreeRoot text= "根节点 " open= "true " href= " " treeId= "123 ">

<DSTree text= "技术论坛 " open= "false " treeId= " ">
<DSTree text= "5DMedia " open= "false "href= "http:// " target= "box " >
<DSTree text= "网页编码 "href= "http:// " target= "box " />
<DSTree text= "手绘 "href= "http://aaa " target= "box " />
<DSTree text= "灌水 "href= "http:// " target= "box " />
</DSTree>

<DSTree text= "BlueIdea " open= "false "href= "http:// " target= "box " treeId= "213 ">
<DSTree text= "DreamWeaver "href= "http:// " target= "box " treeId= "4353 " />
<DSTree text= "FlashActionScript "href= "http:// " target= "box " treeId= "543543 " />
</DSTree>
<DSTree text= "China " open= "false ">
<DSTree text= "Beijing " open= "false "/>
<DSTree text= "Shanghai " open= "false "/>
<DSTree text= "Zhengzhou " open= "false "/>
</DSTree>
<DSTree text= "CSDN " open= "false "href= "http:// " target= "box " treeId= "432 ">
<DSTree text= "JS " open= "false "href= "http:// " target= "box " treeId= "4353 " />
<DSTree text= "XML "id= "abc "href= "http:// " target= "box " treeId= "543543 " />


</DSTree>
</DSTree>
<DSTree text= "历史知识 " open= "false ">
<DSTree text= "春秋战国 " open= "false " refid= "xercesval " />


<DSTree text= "南北朝 " open= "false "/>
<DSTree text= "南宋 " open= "true " href= " " target= "box " id= 'sss '/>
</DSTree>

</DSTreeRoot>
</xml>
<table>
<tr> <td id=treeBox > </td> </tr>
</table>
</BODY>
</HTML>

================================================================

[解决办法]
改了改，LZ 自己看看吧！

核心部分如下：

else{
upobj.all.tags( "img ")[0].src = "d:/endnode.gif ";

// 新增代码
var endTreeNode = upobj.all.tags( "img ")[0].parentNode;
var parentTreeNode = endTreeNode.parentNode;
var newLink = parentTreeNode.insertBefore(document.createElement( "a "), endTreeNode);
// 都链到 CSDN，哈，LZ 自己改改吧
newLink.href = "http://community.csdn.net/ ";
newLink.target = "_blank ";
newLink.appendChild(endTreeNode);
}

全文
==================================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>

<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc ";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000; ";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement( "span ");
var upobj = document.createElement( "span ");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()? "hasItems ": "Items ";
innerHTML = " <img src=d:/expand.gif class=ec> " + thisn.getAttribute( "text ") + " ";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute( "cn ")){
this.setAttribute( "open ",!this.getAttribute( "open "));
this.cn.style.display = this.getAttribute( "open ")? "inline ": "none ";
this.all.tags( "img ")[0].src = this.getAttribute( "open ")? "d:/expand.gif ": "d:/contract.gif ";
}
if(IO){
IO.runtimeStyle.cssText = " ";
IO.setAttribute( "selected ",false);
}
IO = this;
this.setAttribute( "selected ",true);
this.runtimeStyle.cssText = SC;


}
onmouseover = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = " ";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}

if(thisn.getAttribute( "treeId ") != null){
upobj.setAttribute( "treeId ",thisn.getAttribute( "treeId "));
}
if(thisn.getAttribute( "href ") != null){
upobj.setAttribute( "href ",thisn.getAttribute( "href "));
}
if(thisn.getAttribute( "target ") != null){
upobj.setAttribute( "target ",thisn.getAttribute( "target "));
}

nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML( "beforeEnd ", " <br> ")

if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement( "span ");
upobj.setAttribute( "cn ",cn);
if(thisn.getAttribute( "open ") != null){
upobj.setAttribute( "open ",(thisn.getAttribute( "open ")== "true "));
upobj.getAttribute( "cn ").style.display = upobj.getAttribute( "open ")? "inline ": "none ";
if( !upobj.getAttribute( "open "))upobj.all.tags( "img ")[0].src = "d:/contract.gif ";
}

for(i=0;i <nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags( "img ")[0].src = "d:/endnode.gif ";

// 新增代码
var endTreeNode = upobj.all.tags( "img ")[0].parentNode;
var parentTreeNode = endTreeNode.parentNode;
var newLink = parentTreeNode.insertBefore(document.createElement( "a "), endTreeNode);
// 都链到 CSDN，哈
newLink.href = "http://community.csdn.net/ ";
newLink.target = "_blank ";
newLink.appendChild(endTreeNode);
}
return nodeObj;
}
window.onload = initTree;
</script>

<script>
var address ;
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute( "treeId ");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version= "1.0 " encoding= "GB2312 "?>
<DSTreeRoot text= "根节点 " open= "true " href= " " treeId= "123 ">

<DSTree text= "技术论坛 " open= "false " treeId= " ">
<DSTree text= "5DMedia " open= "false "href= "http:// " target= "box " >
<DSTree text= "网页编码 "href= "http:// " target= "box " />
<DSTree text= "手绘 "href= "http://aaa " target= "box " />
<DSTree text= "灌水 "href= "http:// " target= "box " />
</DSTree>

<DSTree text= "BlueIdea " open= "false "href= "http:// " target= "box " treeId= "213 ">
<DSTree text= "DreamWeaver "href= "http:// " target= "box " treeId= "4353 " />
<DSTree text= "FlashActionScript "href= "http:// " target= "box " treeId= "543543 " />


</DSTree>
<DSTree text= "China " open= "false ">
<DSTree text= "Beijing " open= "false "/>
<DSTree text= "Shanghai " open= "false "/>
<DSTree text= "Zhengzhou " open= "false "/>
</DSTree>
<DSTree text= "CSDN " open= "false "href= "http:// " target= "box " treeId= "432 ">
<DSTree text= "JS " open= "false "href= "http:// " target= "box " treeId= "4353 " />
<DSTree text= "XML "id= "abc "href= "http:// " target= "box " treeId= "543543 " />
</DSTree>
</DSTree>
<DSTree text= "历史知识 " open= "false ">
<DSTree text= "春秋战国 " open= "false " refid= "xercesval " />


<DSTree text= "南北朝 " open= "false "/>
<DSTree text= "南宋 " open= "true " href= " " target= "box " id= 'sss '/>
</DSTree>

</DSTreeRoot>
</xml>
<table>
<tr> <td id=treeBox > </td> </tr>
</table>
</BODY>
</HTML>

[解决办法]
好厂啊
[解决办法]
改了，L@_@K

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> DSTree </TITLE>

<style>
body,td{font:12px verdana}
#treeBox{background-color:#fffffa;}
#treeBox .ec{margin:0 5 0 5;}
#treeBox .hasItems{font-weight:bold;height:20px;padding:3 6 0 6;margin:2px;cursor:hand;color:#555555;border:1px solid #fffffa;}
#treeBox .Items{height:20px;padding:3 6 0 6;margin:1px;cursor:hand;color:#555555;border:1px solid #fffffa;}
</style>
<script>
//code by star 20003-4-7
var HC = "color:#990000;border:1px solid #cccccc ";
var SC = "background-color:#efefef;border:1px solid #cccccc;color:#000000; ";
var IO = null;
function initTree(){
var rootn = document.all.menuXML.documentElement;
var sd = 0;
document.onselectstart = function(){return false;}
document.all.treeBox.appendChild(createTree(rootn,sd));
}
function createTree(thisn,sd){
var nodeObj = document.createElement( "span ");
var upobj = document.createElement( "span ");
with(upobj){
style.marginLeft = sd*10;
className = thisn.hasChildNodes()? "hasItems ": "Items ";
innerHTML = " <img src=d:/expand.gif class=ec> " + thisn.getAttribute( "text ") + " ";

onmousedown = function(){
if(event.button != 1) return;
if(this.getAttribute( "cn ")){
this.setAttribute( "open ",!this.getAttribute( "open "));
this.cn.style.display = this.getAttribute( "open ")? "inline ": "none ";
this.all.tags( "img ")[0].src = this.getAttribute( "open ")? "d:/expand.gif ": "d:/contract.gif ";
}
if(IO){
IO.runtimeStyle.cssText = " ";
IO.setAttribute( "selected ",false);
}
IO = this;
this.setAttribute( "selected ",true);
this.runtimeStyle.cssText = SC;


}
onmouseover = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = HC;
}
onmouseout = function(){
if(this.getAttribute( "selected "))return;
this.runtimeStyle.cssText = " ";
}
oncontextmenu = contextMenuHandle;
onclick = clickHandle;
}

if(thisn.getAttribute( "treeId ") != null){
upobj.setAttribute( "treeId ",thisn.getAttribute( "treeId "));
}
if(thisn.getAttribute( "href ") != null){
upobj.setAttribute( "href ",thisn.getAttribute( "href "));
}
if(thisn.getAttribute( "target ") != null){
upobj.setAttribute( "target ",thisn.getAttribute( "target "));
}

nodeObj.appendChild(upobj);
nodeObj.insertAdjacentHTML( "beforeEnd ", " <br> ")

if(thisn.hasChildNodes()){
var i;
var nodes = thisn.childNodes;
var cn = document.createElement( "span ");
upobj.setAttribute( "cn ",cn);
if(thisn.getAttribute( "open ") != null){
upobj.setAttribute( "open ",(thisn.getAttribute( "open ")== "true "));
upobj.getAttribute( "cn ").style.display = upobj.getAttribute( "open ")? "inline ": "none ";
if( !upobj.getAttribute( "open "))upobj.all.tags( "img ")[0].src = "d:/contract.gif ";
}

for(i=0;i <nodes.length;cn.appendChild(createTree(nodes[i++],sd+1)));
nodeObj.appendChild(cn);
}
else{
upobj.all.tags( "img ")[0].src = "d:/endnode.gif ";

// 新增代码
var endTreeNode = upobj.all.tags( "img ")[0].parentNode;
var parentTreeNode = endTreeNode.parentNode;
var newLink = parentTreeNode.insertBefore(document.createElement( "a "), endTreeNode);
// 改了
if(thisn.getAttribute( "href ") != null){
newLink.href = thisn.getAttribute( "href ");
}
//newLink.href = "http://community.csdn.net/ ";
newLink.target = "_blank ";
newLink.appendChild(endTreeNode);
}
return nodeObj;
}
window.onload = initTree;
</script>

<script>
var address ;
function clickHandle(){
// your code here
}
function contextMenuHandle(){
event.returnValue = false;
var treeId = this.getAttribute( "treeId ");
// your code here
}
</script>
</HEAD>
<BODY>
<xml id=menuXML>
<?xml version= "1.0 " encoding= "GB2312 "?>
<DSTreeRoot text= "根节点 " open= "true " href= " " treeId= "123 ">

<DSTree text= "技术论坛 " open= "false " treeId= " ">
<DSTree text= "5DMedia " open= "false "href= "http:// " target= "box " >
<DSTree text= "CSDN "href= "http://community.csdn.net/ " target= "box " />
<DSTree text= "百度 "href= "http://www.baidu.com " target= "box " />
<DSTree text= "谷歌 "href= "http://www.google.com " target= "box " />
</DSTree>

<DSTree text= "BlueIdea " open= "false "href= "http:// " target= "box " treeId= "213 ">
<DSTree text= "DreamWeaver "href= "http:// " target= "box " treeId= "4353 " />


<DSTree text= "FlashActionScript "href= "http:// " target= "box " treeId= "543543 " />
</DSTree>
<DSTree text= "China " open= "false ">
<DSTree text= "Beijing " open= "false "/>
<DSTree text= "Shanghai " open= "false "/>
<DSTree text= "Zhengzhou " open= "false "/>
</DSTree>
<DSTree text= "CSDN " open= "false "href= "http:// " target= "box " treeId= "432 ">
<DSTree text= "JS " open= "false "href= "http:// " target= "box " treeId= "4353 " />
<DSTree text= "XML "id= "abc "href= "http:// " target= "box " treeId= "543543 " />
</DSTree>
</DSTree>
<DSTree text= "历史知识 " open= "false ">
<DSTree text= "春秋战国 " open= "false " refid= "xercesval " />


<DSTree text= "南北朝 " open= "false "/>
<DSTree text= "南宋 " open= "true " href= " " target= "box " id= 'sss '/>
</DSTree>

</DSTreeRoot>
</xml>
<table>
<tr> <td id=treeBox > </td> </tr>
</table>
</BODY>
</HTML>

[解决办法]
<DSTree text= "5DMedia " open= "false "href= "http:// " target= "box " >
<DSTree text= "CSDN "href= "http://community.csdn.net/ " target= "box " />
<DSTree text= "百度 "href= "http://www.baidu.com " target= "box " />
<DSTree text= "谷歌 "href= "http://www.google.com " target= "box " />
</DSTree>


这三个已经可用了,其他的 LZ 自己配制吧

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net