1.二级联动菜单
<!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=utf-8" />
< title> 二级联动菜单</ title>
< script>
function selectCity ( thisobj) {
var cities = {
"北京市" : [ "海淀区" , "朝阳区" , "丰台区" ] ,
"河北省" : [ "石家庄" , "唐山" , "秦皇岛" ] ,
"辽宁省" : [ "沈阳" , "大连" , "鞍山" ] ,
"山东省" : [ "青岛" , "济南" , "烟台" ]
}
var city = cities[ thisobj. value] ;
var se_city = document. getElementById ( "city" ) ;
se_city. innerHTML = "<option>--请选择--</option>" ; 、
for ( var i= 0 ; i< city. length; i++ ) { 、
se_city. innerHTML += "<option>" + city[ i] + "</option>" ;
}
}
</ script>
</ head>
< body>
< select id = " province" onchange = " selectCity(this)" >
< option> --选择省市--</ option>
< option> 北京市</ option>
< option> 河北省</ option>
< option> 辽宁省</ option>
< option> 山东省</ option>
</ select>
< select id = " city" >
< option> --选择城市--</ option>
</ select>
</ body>
</ html>
2.好友列表
< html>
< head>
< meta http-equiv = " Content-Type" content = " text/html; charset=utf-8" />
< title> 好友列表</ title>
< style type = " text/css" >
table {
border : #0099FF 1px solid;
width : 100px;
border-collapse : collapse;
}
table td {
border : #0066FF 1px solid;
background-color : #FF9900;
text-align : center;
}
table td div {
background-color : #FFFF99;
text-align : left;
}
table td a:link, table td a:visited {
color : #00ffFF;
text-decoration : none;
}
table td a:hover {
color : #00CC00;
}
table td div {
display : none;
}
.open {
display : block;
}
.close {
display : none;
}
</ style>
< script type = " text/javascript" >
function openDiv ( thisobj) {
var div = thisobj. nextSibling. nextSibling;
var divs = document. getElementsByTagName ( "div" ) ;
for ( var i= 0 ; i< divs. length; i++ ) {
if ( divs[ i] != div) {
divs[ i] . style. display = "none" ;
}
}
div. style. display == "block" ? div. style. display = "none" : div. style. display = "block" ;
}
</ script>
</ head>
< body>
< table>
< tr>
< td>
< a href = " javascript:void(0)" onclick = " openDiv(this)" > 君王好友</ a>
< div>
秦始皇< br />
刘邦< br />
李世民< br />
康熙< br />
</ div>
</ td>
</ tr>
< tr>
< td>
< a href = " javascript:void(0)" onclick = " openDiv(this)" > 三国好友</ a>
< div>
刘备< br />
关羽< br />
张飞< br />
赵云< br />
</ div>
</ td>
</ tr>
< tr>
< td>
< a href = " javascript:void(0)" onclick = " openDiv(this)" > 美女好友</ a>
< div>
西施< br />
貂蝉< br />
杨贵妃< br />
王昭君< br />
</ div>
</ td>
</ tr>
< tr>
< td>
< a href = " javascript:void(0)" onclick = " openDiv(this)" > IT好友</ a>
< div>
马云< br />
李开复< br />
俞敏洪< br />
李彦宏< br />
</ div>
</ td>
</ tr>
</ table>
</ body>
</ html>