`
xnz8611
  • 浏览: 2189 次
  • 性别: Icon_minigender_2
  • 来自: 合肥
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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>
    <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  
三张图片的下载链接 不能下载,请给出下载地址.谢谢

相关推荐

    JS+css+Json的树形结构

    对json数据的解析,使用JavaScript和html+css制作的树形结构,有不好之处,欢迎指教,多多包涵

    HTML+Javascript+css的树型目录

    包含一个树结构的导航目录(菜单),支持多级。当选择子节点(未全选)的时候父节点为不选,当选择子节点(全选)的时候父节点为全选!结点支持链接。 如果你用了觉得可以,记得回复支持一下。 本人所有资源发布均只...

    JavaScript实现网页树形结构

    一个很好的使用Java语言,结合JavaScript来实现的网页模式的树形结构,其表现实行良好,类似xp系统资源管理器。

    JS+CSS简单树形菜单实现方法

    主要介绍了JS+CSS简单树形菜单实现方法,涉及JavaScript结合css动态操作页面元素结点的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    树形复选框(Checkbox)

    用javascript+css实现的树形复选框(Checkbox),可显示选中数和有展缩功能.

    【JavaScript源代码】jQuery treeview树形结构应用.docx

    jQuery treeview树形结构应用  本文实例为大家分享了jQuery treeview树形结构的应用代码,供大家参考,具体内容如下 继Bootstrap-treeview应用后,我又尝试了用jquery-treeview解决这个问题,记录我的解决方案,...

    java 树形结构代码

    本代码提供tree树形结构的javascript和css以及jsp等页面,可以与大家分享一下

    HTML5树形结构图DIV布局代码.zip

    HTML5树形结构图DIV布局代码.zip

    javascript生成树型结构

    javascript生成树型结构,有三种方案~~~~~~这个十分好的,有三种方案,快点

    风声树形菜单插件附示例 v1.0.rar

    基于JavaScript/XHTML/CSS 标准实现,适应多种浏览器环境。它具有表现和数据分离,一个页面可以应用多个无限级菜单树,多达4种展开模式,支持丰富的功能/表现定制:拥有表现和数据分离,风格样式定义结构清晰、灵活...

    jquery-ts3viewer:一个简单的jQuery插件,用于从JSON数据呈现交互式TeamSpeak 3 Server树形结构

    这个简单的jQuery插件提供了一个动态的TeamSpeak 3服务器树(也称为TSViewer),不需要任何服务器端脚本语言。 由托管的执行所有查询,对频道和客户端进行排序,甚至为您下载所有远程图标。 此外,结果被缓存,因此...

    javascript做的网页树型控件,非常实用

    javascript做的网页树型控件,非常实用,里面有2个html页面, default.html页面是展示控件用的,api.html页面是它的文档说明,还有一个.js和一个.css,大家直接拷过来用就可以了,非常方便

    JSP无限级分类目录树-sorttree.zip

    这样就可以通过递归方式来实现树形结构的展开和收起。 数据的获取和处理:在JSP页面中,需要通过SQL查询语句来获取数据库中的所有节点数据,并将其按照树形结构进行整理和排序。这样就可以在页面上展示出完整的导航...

    JS树形菜单 v1.0

    基于JavaScript/XHTML/CSS 标准实现,适应多种浏览器环境。  它具有表现和数据分离,一个页面可以应用多个无限级菜单树,多达4种展开模式,风格样式定义结构清晰、灵活。  不建议在拥有1000 个以上节点的系统中...

    my_tree_directive:自定义的角度指令,用于具有分页和搜索功能的简单数据树结构

    my_tree_directive 自定义的角度指令,用于具有分页和搜索功能的简单数据树结构。官方页面: : 我刚刚开始使用angularJs自定义指令来实现可扩展的数据树。 该指令的主要特点是: 可插拔可搜寻的分页如何使用我的树...

    mcss:编写模块化css女巫mcss

    与此同时MCSS是一个易用使用CSS Parser, 并提供便利化的方式去操作树形结构, 以实现csscomb、prefixr等CSS工具. MCSS完全使用javascript构建, 你可以分别在browser(ES5 support needed)和nodejs中使用它 目前主页...

    javaweb程序教学任务设计教程ppt

    javaweb程序教学任务设计教程ppt第1章网页开发基础 习题 一、填空题 1....在DOM文档的树形结构中,每个节点有且只有一个子节点。( ) 三、选择题 1.下列选项中,JavaScript运算符的优先级最高的是

    h5-game-blockBreaker:使用es6语法及原生javascript实现的h5小游戏-打砖块

    h5小游戏—打砖块本项目是利用原生js实现的h5小游戏,在实现时使用了大量es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下demo:项目截图已完成功能: 设计多个关卡 显示计分板 特殊砖块血量更多 ...

    FE-Knowledge:前端知识整理

    前端知识整理一、数据结构与算法常见数据结构数组字符串链表栈队列双端队列树算法二、HTML、CSSCSS3新增的伪类有哪些?实现水平居中布局的方案实现垂直居中布局的方案实现水平垂直居中布局的方案两列/三列/多列布局...

    QuickNote:QuickNote 是一个用 Meteor 实现的笔记网站,使用 1) 树状结构来组织笔记 2) markdown 输入富文本

    QuickNote 是一个用实现的笔记网站。 QuickNote 的主要功能是: 以树状结构组织笔记 使用语言输入富文本 我不确定其他人是否会对这样的项目感兴趣,但欢迎您尝试一下,特别是如果您对学习 Meteor 感兴趣。 为了...

Global site tag (gtag.js) - Google Analytics