標籤：字元 name 擷取 編輯 size on() cccccc htm center
代碼執行個體：
<!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 帶聲音的導航
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
