代码实例：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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>
<style>
*{ margin:0; padding:0;}
#ul1{ 1000px; height:30px;}
#ul1 li{
list-style:none;
100px;
height:30px;
background: #cccccc;
color:white; border:1px #000 solid;
float:left;
line-height:30px;
text-align:center;
}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oA = document.getElementById('a1');
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover= function(){
//this.getAttribute('au');
//字符串拼接的方式，获取不同的地址
oA.src = this.getAttribute('au')+'.mp3';
//播放
oA.play();
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li au="A" background="blue" >首页</li>
<li au="B">视频</li>
<li au="C">课程</li>
<li au="D">职业</li>
<li au="E">企业</li>
<li au="F">社区</li>
<li au="G">会员</li>
</ul>
<audio id="a1"></audio>
</body>
</html>
效果：
、
编辑的文件
2017-09-03 20:44:37