首先，编写 html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>省市级菜单制作</title>
</head>
<!--文件排版 外置 css 样式表 导入:这样更有利于页面维护-->
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<!--文件操作 外置 js 脚本 -->
<script src="css/setShow.js" type="text/javascript"></script>
<body οnlοad="Load_show()">
<center><a href="JSprovince.htm" name="menuTitle">这是一个动态菜单</a></h1></center><br /><br />
<!--说明：该网页实现省市的动态显示-->
<div class="P_float" οnclick="showList('china')">
中国
<ul id="cn_show">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
<li>香港</li>
<li>澳门</li>
<li>台湾</li>
</ul>
</div>
<div class="P_float" οnclick="showList('eastNorth')">
东北
<ul id="en_show">
<li>黑龙江</li>
<li>沈阳</li>
<li>哈尔滨</li>
<li>长春</li>
<li>辽宁</li>
<li>大连</li>
<li>齐齐哈尔</li>
</ul>
</div>
<div class="P_float" οnclick="showList('westNorth')">
西北
<ul id="wn_show">
<li>
新疆
<div>
<ul>
<li>乌鲁木齐</li>
<li>奎屯</li>
<li>石河子</li>
<li>昌吉</li>
<li>吐鲁番</li>
<li>库尔勒</li>
<li>阿克苏</li>
<li>克拉玛依</li>
</ul>
</div>
</li>
<li>内蒙古</li>
<li>陕西
<div>
<ul>
<li>西安</li>
<li>延安</li>
<li>榆林</li>
<li>渭南</li>
<li>商州</li>
<li>安康</li>
<li>汉中</li>
<li>宝鸡</li>
</ul>
</div>
</li>
<li>甘肃
<div>
<ul>
<li>兰州</li>
<li>定西</li>
<li>天水</li>
<li>陇南</li>
<li>嘉峪关</li>
<li>酒泉</li>
<li>平凉</li>
<li>武威</li>
<li>张掖</li>
<li>临夏</li>
</ul>
</div>
</li>
<li>宁夏</li>
<li>西藏</li>
<li>青海</li>
</ul>
</div>
<div class="P_float" οnclick="showList('SouthofChina')">
华南
<ul id="sfc_show">
<li>四川</li>
<li>贵州
<div>
<ul>
<li>贵阳</li>
<li>遵义</li>
<li>安顺</li>
<li>都匀</li>
<li>凯里</li>
<li>铜仁</li>
<li>大盘水</li>
<li>兴义</li>
</ul>
</div>
</li>
<li>安徽</li>
<li>广东
<div>
<ul>
<li>广州</li>
<li>深圳</li>
<li>东莞</li>
<li>汕头</li>
<li>江门</li>
<li>中山</li>
<li>英德</li>
<li>珠海</li>
<li>湛江</li>
</ul>
</div>
</li>
<li>广西</li>
<li>海南</li>
<li>江西</li>
</ul>
</div>
<div class="P_float" οnclick="showList('other')">
其它省市
<ul id="ots_show">
<li>福建</li>
<li>江苏</li>
<li>浙江
<div>
<ul>
<li>杭州</li>
<li>湖州</li>
<li>嘉兴</li>
<li>宁波</li>
<li>绍兴</li>
<li>温州</li>
<li>丽水</li>
<li>金华</li>
</ul>
</div>
</li>
<li>河南</li>
<li>湖北</li>
<li>湖南</li>
</ul>
</div>
</body>
</html>
然后，给文档排版，使用外部样式表
/* CSS Document */
/*
*首先设定 body 的属性
*/
body{
height:600px;
width:680px;
background-image:url(../images/twoLeaf.jpg);
background-position:center;
background-repeat:no-repeat;
margin-left:266px;
}
/* 这里设置div 的基本特性 */
div{
font:24px bold;
color:#660000;
padding-left:30px;
}
div ul li{
list-style:none;
font:"宋体" 16px bold;
color:#3300FF;
}
/* 平行显示各个省市 */
.P_float{
float:left;
}
a{
color:#FF0000;
font-size:36px;
text-decoration:none;
}
a:hover{
color:#3300FF;
font-size:40px;
}
最后使用js 代码实现动态显示
/*
* 思路：只要判断一个 ul 元素的事件为真，其它默认为隐藏
* 当 点击 最上角的 ‘中国’ 时，以下内容动态显示出来
* 条件：当 中国被点击时，中国以下节点 Childnodes 的样式 style.display = block;其它的默认为 none;
*/
//页面加载方法
function Load_show(){
//获取句柄的全局变量：默认没有var 关键字
cn = document.getElementById("cn_show");
en = document.getElementById("en_show");
wn = document.getElementById("wn_show");
sfc = document.getElementById("sfc_show");
ots = document.getElementById("ots_show");
//页面加载时，所有的子区默认不显示
cn.style.display = 'none';
en.style.display = 'none';
wn.style.display = 'none';
sfc.style.display = 'none';
ots.style.display = 'none';
}
function showList(list){
//声明一个载入句柄的数组，这样简化代码的冗余
var handle = new Array();
handle[0] = cn;
handle[1] = en;
handle[2] = wn;
handle[3] = sfc;
handle[4] = ots;
//判断单击事件
if(list == "china"){
for(var i=0;i<handle.length;i++){
handle[i].style.display = 'none';
}
cn.style.display = 'block';
}
if(list == "eastNorth"){;
for(var i=0;i<handle.length;i++){
handle[i].style.display = 'none';
}
en.style.display = 'block'
}
if(list == "westNorth"){;
for(var i=0;i<handle.length;i++){
handle[i].style.display = 'none';
}
wn.style.display = 'block'
}
if(list == "SouthofChina"){;
for(var i=0;i<handle.length;i++){
handle[i].style.display = 'none';
}
sfc.style.display = 'block'
}
if(list == "other"){;
for(var i=0;i<handle.length;i++){
handle[i].style.display = 'none';
}
ots.style.display = 'block'
}
}
以上是我的源代码，和大伙分享一下！
3677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
