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

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

CSSJavaScript工作 
阅读更多
最近应公司要求要设计一个全国地区列表的页面

于是想到了用树形列表来实现该功能，由于以前潜心研究过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
把图片根网页放在同一目录下即可。

代码其实很简单，里面也没有把全国地区都列入，因为工作量太庞大了，所以只列了少许地区，关键是要能灵活变通，不要生搬硬套，不然代码就没有灵活性了
分享到：
Hibernate笔记=>Session缓存
评论
1 楼 wgcniler 2011-03-15  
三张图片的下载链接 不能下载,请给出下载地址.谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Div+Css+js树形菜单

    本项目以“Div+Css+js树形菜单”为主题，利用HTML的Div元素、CSS样式和JavaScript脚本来实现一个功能完备、视觉效果良好的树形菜单。 首先，Div是HTML中的一个布局容器，用于组织和控制页面内容的布局。在树形菜单...

    js+css网站通用的树形结构

    在压缩包文件"**d300**"中，可能包含了实现这一通用树形结构的源代码，包括JavaScript文件（可能包含自定义的树形组件实现）和CSS文件（用于定制样式）。具体代码实现细节需查看文件内容以获取更多信息。 总的来说...

    JS+css+Json的树形结构

    在树形结构的实现中，CSS负责控制每个节点的视觉表现，比如颜色、字体、边框、间距、层次感等。通过CSS选择器和伪类，可以精确地控制节点的展开、折叠效果，以及选中、悬停状态的样式。 在实际应用中，创建一个树形...

    div+css+js树形导航

    1. 使用HTML创建基本的树形结构，每个节点用`div`表示，通过`class`或`id`属性来区分不同层级和状态。 2. 编写CSS样式，定义节点的基本样式，以及在展开/折叠状态下的样式变化。例如，设置折叠状态时子节点的`...

    DIV+CSS+JS树形菜单

    综上所述，构建“DIV+CSS+JS树形菜单”涉及了HTML结构设计、CSS样式美化以及JavaScript交互实现，是前端开发中常见的技能之一。通过学习和理解这些技术，开发者能够创建出功能丰富、交互性强的网页导航菜单。

    vuex-table+SpringBoot前端实现树形结构（csdn）————程序.pdf

    在本文档中，我们探讨了如何使用`Vuex`和`vxe-table`库与`SpringBoot`后端配合，在前端实现树形结构的数据展示。`vxe-table`是一个功能强大的表格组件，提供了丰富的功能，如表格编辑、排序、筛选等，同时也支持树形...

    很不错的树形菜单（javascript+css）

    在这个案例中，"很不错的树形菜单（javascript+css）"是一个使用JavaScript和CSS技术实现的交互式菜单系统，旨在提供优雅且高效的方式来浏览多级结构的信息。 首先，JavaScript是一种广泛应用于网页开发的客户端...

    JavaScript+Ajax实现树形目录

    JavaScript+Ajax实现树形目录是一种常见的前端技术应用，主要用于构建交互式、动态更新的网页内容。在本场景中，我们主要关注三个核心概念：树形目录、JavaScript和Ajax。 **树形目录** 是一种模拟真实文件系统或者...

    Ajax+jsp+MySQL实现动态树形菜单

    在动态树形菜单中，Ajax负责异步加载子节点，当用户展开一个父节点时，它会发送请求到服务器，获取该父节点下的子节点信息，然后在客户端动态插入到树形结构中，这样既提高了用户体验，又减轻了服务器压力。...

    HTML+Javascript+css的树型目录

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

    js+asp实现树形结构，选取文本框可以获取树形节点的值

    本文将详细解析如何使用JavaScript（JS）和Active Server Pages（ASP）来实现一个树形结构，以及如何在文本框中获取选中的树形节点值。 首先，让我们了解树形结构的基本概念。树形结构是一种数据结构，它通过节点间...

    vue+elementui实现多层树形菜单

    其中，`&lt;el-tree&gt;`组件用于构建树形结构，支持自定义节点内容、异步加载数据等功能。 ### 3. 多层树形菜单实现 在Vue.js应用中，多层树形菜单的实现通常需要以下几个步骤： #### 3.1 安装依赖 首先，确保已安装Vue...

    生日祝福（HTML+CSS+JavaScript+jQuery）.zip

    DOM（Document Object Model）是HTML和XML文档的编程接口，它将网页内容表示为树形结构，使得可以通过JavaScript或jQuery来改变、添加或删除页面元素。这对于大学生来说，是提升前端开发技能的一个极好实践案例。 ...

    纯CSS族谱树形结构

    总之，纯CSS构建的族谱树形结构是一种高效且灵活的解决方案，结合HTML和JavaScript可以实现更多功能。理解并掌握上述知识点，你就可以创建出美观且实用的树形结构，无论是在个人项目还是商业应用中，都将大有裨益。

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

    本文将详细讲解如何使用JavaScript和CSS来实现一个简单的树形菜单。 首先，我们来理解JavaScript在此处的作用。JavaScript是客户端脚本语言，用于动态修改HTML和CSS，实现交互效果。在树形菜单的实现中，JavaScript...

    javascript+xml无线级树形菜单

    2. **创建 HTML 结构**：使用 JavaScript 动态生成 HTML 元素，模拟树形结构。每个节点可能包含一个父节点和多个子节点，因此需要递归地创建 `&lt;ul&gt;` 和 `&lt;li&gt;` 元素。 3. **添加事件监听器**：为每个节点添加点击...

    Ajax+jsp+oracle实现动态树形菜单

    3. **样式和交互**：为了让树形菜单具有良好的视觉效果和交互体验，还需要编写CSS样式和JavaScript事件处理，如展开/折叠节点，高亮选中节点等。 总结来说，"Ajax+jsp+oracle实现动态树形菜单"项目是一个典型的前后...

    JS+CSS+Strus2实现树

    本文将深入探讨如何使用JavaScript、CSS以及Struts2框架来实现一个这样的树形结构。首先，让我们逐个了解这些技术在实现过程中扮演的角色。 **JavaScript**：作为客户端脚本语言，JavaScript主要负责处理用户交互和...

    html+css+JavaScript实现表白代码

    "html+css+JavaScript实现表白代码"是一个有趣的项目，它结合了这些技术，以创建一个具有浪漫氛围的表白页面。这个项目通常包括一个精心设计的布局，动态效果，以及可能的背景音乐，以增强情感表达。 首先，HTML...

    简单的JS +CSS 树形代码

    在本文中，我们将深入探讨如何使用JavaScript（JS）和CSS创建一个简单的树形结构，以实现美观且易于理解的可视化效果。"简单的JS + CSS 树形代码"这个标题所暗示的是，通过这两种技术的结合，我们可以创建一个直观的...

Magicbox
Global site tag (gtag.js) - Google Analytics