代码实例：
<!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{ width:1000px; height:30px;}
???????#ul1 li{
???????????list-style:none;
???????????width: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
html5 带声音的导航
原文地址：http://www.cnblogs.com/guangzhou11/p/7470996.html