1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式，并加入背景图片。
4、为li添加id，创建函数fun ，并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)"
6、加入改变文字大小的代码
element.style.color="black"
//修改文字大小
element.style.fontSize="18px"
7、然后就完成了。
给你一个朴素版的导航(包含css和html2部分)：css.css文件
body{
font-size:12px
font-family:Arial,
Helvetica,
sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-align:center
text-decoration:none
float:left
width:100px
padding:3px
5px
0px
5px
}
a:visited{
color:#336601
text-align:center
text-decoration:none
float:left
padding:3px
5px
0px
5px
width:100px
}
a:hover{
color:white
float:left
padding-left:6px
text-align:center
width:100px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px
3px
0px
20px
width:100px
text-align:center
text-decoration:none
background-color:#539D26
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px
5px
position:absolute
z-index:1
left:
198px
top:
25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px
4px
0px
0px
border:1px
solid
#9CDD75
background-color:#F1FBEC
color:#336601
padding:6px
0px
0px
cursor:pointer
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:18px
margin:6px
4px
0px
0px
background-color:#F5F5F5
color:#999999
border:1px
solid
#EEE8DD
padding:6px
0px
0px
0px
overflow-y:hidden
cursor:pointer
}
