最近应公司要求要设计一个全国地区列表的页面
于是想到了用树形列表来实现该功能，由于以前潜心研究过css所以对css比较熟悉，而javascript也经常接触，所以也还过得去，于是想到了结合javascript和css来实现这个树形列表的功能，希望对有需要的朋友有所帮助
下面是代码
====================================================================================
<html><HEAD><TITLE>全国地区树形列表</TITLE>
<META http-equiv=Content-Type content="text/html; charset=GB2312">
<style>
td{font-size:12px}
div{font-family:宋体}
div.tree_add{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px;color:blue;cursor:hand}
div.tree_1{background:url(ico_top1.gif) no-repeat left middle;padding-top:3px;font-size:15px;padding-left:20px;cursor:hand;color:blue}
div.tree_2{padding-left:100px;background:url(treeline_1.gif) 100px repeat-y;font-size:14px}
div.tree_3{background:url(treeline_2.gif) no-repeat left;padding-left:24px;padding-top:3px}
</style>
<script>
<!--
function line(obj)//添加下划线
{
obj.style.textDecoration='underline';
}
function delline(obj)//取消下划线
{
obj.style.textDecoration='none';
}
function showtree(str)//展开|关闭子分支
{
var eval1="span_"+str+".innerHTML=span_"+str+".innerHTML=='+'?'-':'+'";
var eval2=str+"_value.style.display="+str+"_value.style.display=='none'?'':'none'";
eval(eval1);
eval(eval2);
}
-->
</script>
</HEAD>
<BODY style="MARGIN: 0px">
<table>
<tr>
<td width=80% style="padding:30px">
<div class=tree_1 onmouseover="line(this)" onMouseOut="delline(this)" onClick="showtree('directly')">直辖市 <span id=span_directly style="color:gray">+</span></div>
<div id=directly_value class=tree_2 style="display:none">
<div class=tree_3>北京（京）</div>
<div class=tree_3>上海（沪）</div>
<div class=tree_3>天津（津）</div>
<div class=tree_3>重庆（渝）</div>
</div>
<br><br>
<div class=tree_1 onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state')">省 市 <span id=span_state style="color:gray">+</span></div>
<div id=state_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_hebei')">河北省（冀） <span id=span_state_hebei style="color:gray">+</span></div>
<div id=state_hebei_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_baoding')">保定市 <span id=span_city_baoding style="color:gray">+</span></div>
<div id=city_baoding_value class=tree_2 style="display:none">
<div class=tree_3>徐水县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_handan')">邯郸市 <span id=span_city_handan style="color:gray">+</span></div>
<div id=city_handan_value class=tree_2 style="display:none">
<div class=tree_3>曲周县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_shijiazhuang')">石家庄市 <span id=span_city_shijiazhuang style="color:gray">+</span></div>
<div id=city_shijiazhuang_value class=tree_2 style="display:none">
<div class=tree_3>晋州市</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_langfang')">廊坊市 <span id=span_city_langfang style="color:gray">+</span></div>
<div id=city_langfang_value class=tree_2 style="display:none">
<div class=tree_3>香河县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_tangshan')">唐山市 <span id=span_city_tangshan style="color:gray">+</span></div>
<div id=city_tangshan_value class=tree_2 style="display:none">
<div class=tree_3>玉田县</div>
</div>
</div>
<div class=tree_3>山西省（晋）</div>
<div class=tree_3>辽宁省（辽）</div>
<div class=tree_3>吉林省（吉）</div>
<div class=tree_3>黑龙江省（黑）</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_jiangsu')">江苏省（苏） <span id=span_state_jiangsu style="color:gray">+</span></div>
<div id=state_jiangsu_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_suqian')">宿迁市 <span id=span_city_suqian style="color:gray">+</span></div>
<div id=city_suqian_value class=tree_2 style="display:none">
<div class=tree_3>泗洪县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_nantong')">南通市 <span id=span_city_nantong style="color:gray">+</span></div>
<div id=city_nantong_value class=tree_2 style="display:none">
<div class=tree_3>启东市</div>
<div class=tree_3>海安县</div>
<div class=tree_3>如东县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_xuzhou')">徐州市 <span id=span_city_xuzhou style="color:gray">+</span></div>
<div id=city_xuzhou_value class=tree_2 style="display:none">
<div class=tree_3>邳州市</div>
<div class=tree_3>丰县</div>
<div class=tree_3>沛县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_lianyungang')">连云港市 <span id=span_city_lianyungang style="color:gray">+</span></div>
<div id=city_lianyungang_value class=tree_2 style="display:none">
<div class=tree_3>东海县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_huaian')">淮安市 <span id=span_city_huaian style="color:gray">+</span></div>
<div id=city_huaian_value class=tree_2 style="display:none">
<div class=tree_3>金湖县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_yancheng')">盐城市 <span id=span_city_yancheng style="color:gray">+</span></div>
<div id=city_yancheng_value class=tree_2 style="display:none">
<div class=tree_3>大丰市</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_yangzhou')">扬州市 <span id=span_city_yangzhou style="color:gray">+</span></div>
<div id=city_yangzhou_value class=tree_2 style="display:none">
<div class=tree_3>江都市</a></div>
</div>
</div>
<div class=tree_3>浙江省（浙）</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_anhui')">安徽省（皖） <span id=span_state_anhui style="color:gray">+</span></div>
<div id=state_anhui_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_asuzhou')">宿州市 <span id=span_city_asuzhou style="color:gray">+</span></div>
<div id=city_asuzhou_value class=tree_2 style="display:none">
<div class=tree_3>砀山县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_xuancheng')">宣城市 <span id=span_city_xuancheng style="color:gray">+</span></div>
<div id=city_xuancheng_value class=tree_2 style="display:none">
<div class=tree_3>宁国市</div>
</div>
</div>
<div class=tree_3>福建省（闽）</div>
<div class=tree_3>江西省（赣）</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_shandong')">山东省（鲁） <span id=span_state_shandong style="color:gray">+</span></div>
<div id=state_shandong_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_rizhao')">日照市 <span id=span_city_rizhao style="color:gray">+</span></div>
<div id=city_rizhao_value class=tree_2 style="display:none">
<div class=tree_3>莒县</div>
</div>
</div>
<div class=tree_3>河南省（豫）</div>
<div class=tree_3>湖北省（鄂）</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_hunan')">湖南省（湘） <span id=span_state_hunan style="color:gray">+</span></div>
<div id=state_hunan_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_huaihua')">怀化市 <span id=span_city_huaihua style="color:gray">+</span></div>
<div id=city_huaihua_value class=tree_2 style="display:none">
<div class=tree_3>通道县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_changsha')">长沙市 <span id=span_city_changsha style="color:gray">+</span></div>
<div id=city_changsha_value class=tree_2 style="display:none">
<div class=tree_3>长沙县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_shaoyang')">邵阳市 <span id=span_city_shaoyang style="color:gray">+</span></div>
<div id=city_shaoyang_value class=tree_2 style="display:none">
<div class=tree_3>邵东县</div>
</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_changde')">常德市 <span id=span_city_changde style="color:gray">+</span></div>
<div id=city_changde_value class=tree_2 style="display:none">
<div class=tree_3>汉寿县</div>
</div>
</div>
<div class=tree_3>广东省（粤）</div>
<div class=tree_3>海南省（琼）</div>
<div class=tree_3>四川省（川、蜀）</div>
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state_guizhou')">贵州省（黔、贵） <span id=span_state_guizhou style="color:gray">+</span></div>
<div id=state_guizhou_value class=tree_2 style="display:none">
<div class=tree_add onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('city_bijie')">毕节市 <span id=span_city_bijie style="color:gray">+</span></div>
<div id=city_bijie_value class=tree_2 style="display:none">
<div class=tree_3>纳雍县</div>
</div>
</div>
<div class=tree_3>云南省（滇、云）</div>
<div class=tree_3>陕西省（陕、秦）</div>
<div class=tree_3>甘肃省（甘、陇）</div>
<div class=tree_3>青海省（青）</div>
<div class=tree_3>台湾省（台）</div>
</div>
<br><br>
<div class=tree_1 onmouseover="line(this)" onMouseOut="delline(this)" onClick="showtree('autonomous')">自治区 <span id=span_autonomous style="color:gray">+</span></div>
<div id=autonomous_value class=tree_2 style="display:none">
<div class=tree_3>广西壮族自治区（桂）</div>
<div class=tree_3>内蒙古自治区（蒙）</div>
<div class=tree_3>西藏自治区（藏）</div>
<div class=tree_3>宁夏回族自治区（宁）</div>
<div class=tree_3>新疆维吾尔自治区（新）</div>
</div>
<br><br>
<div class=tree_1 onmouseover="line(this)" onMouseOut="delline(this)" onClick="showtree('specially')">特别行政区 <span id=span_specially style="color:gray">+</span></div>
<div id=specially_value class=tree_2 style="display:none">
<div class=tree_3>香港特别行政区（港）</div>
<div class=tree_3>澳门特别行政区（澳）</div>
</div>
<br><br>
</td>
</tr>
</table>
</html>
===============================================================================
这里再给出网页css中用到的三张图片的下载链接
ico_top1.gif
treeline_1.gif
treeline_2.gif
把图片根网页放在同一目录下即可。
代码其实很简单，里面也没有把全国地区都列入，因为工作量太庞大了，所以只列了少许地区，关键是要能灵活变通，不要生搬硬套，不然代码就没有灵活性了
1 楼
wgcniler
2011-03-15
三张图片的下载链接 不能下载,请给出下载地址.谢谢