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、然后就完成了。
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>多选项切换导航菜单</title>
</head>
<style type="text/css">
#dNavBar{
background-color:#ffffff
}
#dNavBar li{
list-style-type:none
float:left
width:84px
height:28px
line-height:28px
font-size:12px
color:#FFFFFF
border:1px solid #ffffff
background:#86C2FF
text-align:center
display:block
cursor:pointer
}
#subMenu{
background:#99cc66
width:500px
border-left:1px solid #ffffff
border-right:1px solid #ffffff
height:29px
line-height:29px
color:#FFFFFF
font-size:12px
padding-left:10px
}
body {
margin: 0px
}
a:link,a:visited {
color: #FFFFFF
text-decoration: none
}
a:hover{
color: #FFFFFF
text-decoration: none
}
</style>
<script language="javascript">
function ShowMenu()
{
var barCTT=document.getElementByIdx_x("dNavBar")
var liArr=barCTT.getElementsByTagName_r("li")
var links=new Array()
links[0]="<a href='#'>当前位置：首页"
links[1]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>"
links[2]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[3]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>| <a href='#'>项目四</a>| <a href='#'>项目五</a>"
links[4]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[5]="<a href='#'>项目一</a>| <a href='#'>项目二</a>| <a href='#'>项目三</a>"
links[6]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[7]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[8]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[9]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[10]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[11]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
links[12]="<a href='#'>项目一</a>| <a href='#'>项目二</a>"
for (i=0i<liArr.lengthi++)
{
liArr[i].onclick=function()
{
selectThis(this,liArr,links)
}
}
}
function selectThis(indexObj,allLi,infoArr)
{
var index=0
for (i=0i<allLi.lengthi++)
{
allLi[i].style.border="1px solid #ffffff"
allLi[i].style.backgroundColor="#86C2FF"
allLi[i].style.height="28px"
if (indexObj==allLi[i])
{
index=i
}
}
indexObj.style.borderBottom="0px solid #666688"
indexObj.style.backgroundColor="#99cc66"
indexObj.style.height="31px"
document.getElementByIdx_x("subMenu").innerHTML=infoArr[index]
}
</script>
<body onLoad="ShowMenu()">
<div id="dNavBar" style="float:nonewidth:560px"><li>首页</li><li>娱乐快报</li><li>音乐天地</li><li>极品FLASH</li>
</div>
<div id="subMenu">站务公告</div>
</body>
</html>
这个是因为在flexy-menu.js中对窗口缩放进行了控制。当窗口缩放的后的宽度小于768时，菜单就会被隐藏。这里我把这个功能给去除了，缩放时菜单将不再会被隐藏了。
附件是修改好了的文件，可以直接使用。
