改变页面背景图片和li的样式(地图左上角的切换及改变文字样式)-CSDN博客


页面的写法如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="temp/layout.css" type="text/css" />

<SCRIPT type=text/javascript src="maps/jquery.js"></SCRIPT>

<style type="text/css">
body{background:url(images/map1.jpg); position:relative;}
body,html{height:100%;}
</style>

<script type="text/javascript">
function click1(){
	//alert("li1");
	document.body.style.backgroundImage = "url(images/map1.jpg)";
	document.getElementById("li1").className = "map_hover";
	document.getElementById("li2").className = "";
	document.getElementById("li3").className = "";
}
function click2(){
	//alert("li2");
	document.body.style.backgroundImage = "url(images/map2.jpg)";
	document.getElementById("li1").className = "";
	document.getElementById("li2").className = "map_hover";
	document.getElementById("li3").className = "";
}
function click3(){
	//alert("li3");
	document.body.style.backgroundImage = "url(images/map3.jpg)";
	document.getElementById("li1").className = "";
	document.getElementById("li2").className = "";
	document.getElementById("li3").className = "map_hover";
}
</script>

</head>

<body>
<div class="maptab">
		 <ul>
		  <li id="li1" onclick="click1()" class="map_hover">行政</li>
		  <li id="li2" onclick="click2()">二维</li>
		  <li id="li3" onclick="click3()">三维</li>
   </ul>
</div>
<div class="map_1111"><img src="maps/1111.png" /></div>

<div class="tips"><img src="images/warning.png" />  	现有<font style="color:#F30; font-weight:bold;padding:0 3px; font-size:16px;">15</font>条报警信息</div>

</body>

[code="java"]
样式文件中的写法：
.maptab ul li.map_hover{ font-weight:bold; color:#fff;}

[/code]