javascript+css简略实现树形结构列表
日期：2014-05-17 浏览次数：20807 次
javascript+css简单实现树形结构列表
最近应公司要求要设计一个全国地区列表的页面
于是想到了用树形列表来实现该功能，由于以前潜心研究过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>
&n
最近应公司要求要设计一个全国地区列表的页面
于是想到了用树形列表来实现该功能，由于以前潜心研究过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>
&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
