<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:script type="text/javascript"><!-- function change(f) { var oDiv=document.getElementById(f); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } // --></mce:script> </head> <body> <div style="color:#CC0000" mce_style="color:#CC0000" οnclick="change('zhedie1')">歌星地区</div> <div id="zhedie1"style="display:none" > <ol> <li>香港</li> <li>内地</li> <li>台湾</li> </ol> </div> <!--超链接形式实现style="text-decoration:none"去掉下划线--> <a href="javascript:change('zhedie2')" mce_href="javascript:change('zhedie2')" style="text-decoration:none" mce_style="text-decoration:none">电影</a> <div id="zhedie2"style="display:none" > <ol> <li>喜剧</li> <li>战争</li> <li>爱情</li> </ol> </div> </body> </html> 第二种类型 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <mce:script type="text/javascript"><!-- function showContent(num) { for(var i=0;i<right.children.length;i++) { right.children(i).style.display="none"; } right.children(num).style.display=""; } // --></mce:script> <body> <div id="center"> <div id="left"> <ul> <li><a href="#" mce_href="#" οnclick="showContent(0)">链接一</a></li> <li><a href="#" mce_href="#" οnclick="showContent(1)">链接二</a></li> <li><a href="#" mce_href="#" οnclick="showContent(2)">链接三</a></li> <li><a href="#" mce_href="#" οnclick="showContent(3)">链接四</a></li> </ul> </div> <div id="right" style="width:200;height:100;background-color:#abcdef"> <div class="a" style="display:none" mce_style="display:none">一的内容</div> <div class="b" style="display:none" mce_style="display:none">二的内容</div> <div class="c" style="display:none" mce_style="display:none">三的内容</div> <div class="d" style="display:none" mce_style="display:none">四的内容</div> </div> </div> </body> </html> 第三种 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT="qkhhcelb"> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE="JavaScript"> function showmenu(n) { if (eval("div"+n).style.display=="inline") { eval("div"+n).style.display="none"; } else { hiddenall(); eval("div"+n).style.display="inline"; } } function hiddenall(){ for (i=1;i<4 ;i++ ) { eval("div"+i).style.display="none"; } } </SCRIPT> </HEAD> <BODY> <TABLE width="150" border="1"> <TR> <TD><a href="#" mce_href="#" οnclick="showmenu(1)">新闻管理</a><br><div id="div1" style="display:none" mce_style="display:none"><a href="#" mce_href="#">添加新闻</a><br>删除新闻<br>修改新闻</div></TD> </TR> <TR> <TD><a href="#" mce_href="#" οnclick="showmenu(2)">音乐管理</a><br><div id="div2" style="display:none" mce_style="display:none">添加音乐<br>删除音乐<br>修改音乐</div></TD> </TR> <TR> <TD><a href="#" mce_href="#" οnclick="showmenu(3)">其他管理</a><br><div id="div3" style="display:none" mce_style="display:none">添加其他<br>删除其他<br>修改其他</div></TD> </TR> </TABLE> </BODY> </HTML> 第四种自己写的但是在火狐可以,在ie不行 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:script type="text/javascript"><!-- function tree(id, name, text, js) { if (js == "javascript:void(0);") { document.write("<div style='width:150px' name='" + name + "_parent' οnclick='change(/"" + name + "_parent/")'>" + text + "</div>/n"); } else { document.write("<div style='display:none;width:150px' name='" + name + "_parent_child'> <a href="" + js + "" mce_href="" + js + "">" + text + "</a></div>/n"); } } function change(name) { var children = document.getElementsByName(name + "_child"); for ( var index = 0; index < children.length; index++) { children[index].style.display = children[index].style.display == 'none' ? 'block' : 'none'; } } // --></mce:script> </head> <body> <mce:script type="text/javascript"><!-- tree('1','first',"第一层",'javascript:void(0);'); tree('2','first',"第1层",'#'); tree('2','first',"第2层",'#'); tree('2','first',"第3层",'#'); tree('2','first',"第4层",'#'); tree('2','first',"第5层",'#'); tree('2','first',"第6层",'#'); tree('1','s',"第222层",'javascript:void(0);'); tree('2','s',"第1层",'#'); tree('2','s',"第2层",'#'); tree('2','s',"第3层",'#'); tree('2','s',"第4层",'#'); tree('2','s',"第5层",'#'); tree('2','s',"第6层",'#'); // --></mce:script> </body> </html> 第五种自己写的ie正常显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:script type="text/javascript"><!-- function tree(id, name, text, js) { if (js == "javascript:void(0);") { document.write("<div style='width:150px' id='" + id + "' οnclick='change(/"" + id + "/",/"" + name + "/")'>" + text + "</div>/n"); } else { document.write("<div style='display:none;width:150px' id='" + id + "'> <a href="" + js + "" mce_href="" + js + "">" + text + "</a></div>/n"); } } function change(id,name) { var hr = parseInt(id); for(i=0;i<hr;i++) { var children = document.getElementById(i+name); children.style.display = children.style.display == 'none' ? 'block' : 'none'; } } // --></mce:script> </head> <body> <mce:script type="text/javascript"><!-- tree('6','first',"第一层",'javascript:void(0);'); tree('0first','first',"第1层",'#'); tree('1first','first',"第2层",'#'); tree('2first','first',"第3层",'#'); tree('3first','first',"第4层",'#'); tree('4first','first',"第5层",'#'); tree('5first','first',"第6层",'#'); tree('7','s',"第222层",'javascript:void(0);'); tree('0s','s',"第1层",'#'); tree('1s','s',"第2层",'#'); tree('2s','s',"第3层",'#'); tree('3s','s',"第4层",'#'); tree('4s','s',"第5层",'#'); tree('5s','s',"第6层",'#'); tree('6s','s',"第7层",'#'); // --></mce:script> </body> </html>