html5实现树形结构,javascript+css简单实现树形结构列表

静态的树状结构

下面是代码

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

全国地区树形列表

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="padding:30px"> onMouseOut="delline(this)" onClick="showtree('directly')">直辖市 style="color:gray">+ style="display:none"> class=tree_3>北京(京) class=tree_3>上海(沪) class=tree_3>天津(津) class=tree_3>重庆(渝) onMouseOver="line(this)" onMouseOut="delline(this)" onClick="showtree('state')">省 市 id=span_state style="color:gray">+ style="display:none"> onMouseOut="delline(this)" onClick="showtree('state_hebei')">河北省(冀) style="color:gray">+ style="display:none"> onMouseOut="delline(this)" onClick="showtree('city_baoding')">保定市 style="color:gray">+ style="display:none"> class=tree_3>徐水县 onMouseOut="delline(this)" onClick="showtree('city_handan')">邯郸市 style="color:gray">+ style="display:none"> class=tree_3>曲周县