用js枚舉實現簡易菜單效果，左側顯示菜單，右側顯示用戶選擇的菜單，一圖勝千言，還是直接來張效果圖吧：
以下是代碼：
<DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
color:#333;
font-size:12px;
}
div{
width: 300px;
margin: 0 auto;
}
ul{
width: 80px;
height:200px;
background: #ccc;
list-style:none;
float: left;
margin: 10px;
}
li{
width: 60px;
height:20px;
margin:4px;
background: orange;
line-height: 20px;
text-align: center;
cursor:pointer;
}
li:hover{
background:#EE9A00
}
</style>
<script>
window.οnlοad=function(){
var oli=document.getElementById('fa').getElementsByTagName('li');
var newul=document.getElementById('so');
var newli=newul.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].οnclick=function(){
if(selectfn(this.innerHTML)) //倘若該菜沒有被選中，那麼添加到用戶菜單
{
var createli=document.createElement('li');
createli.innerHTML=this.innerHTML;//改代碼放在appendchild之前能提高性能
newul.appendChild(createli); //向用戶菜單中加入該節點
}
};
}
function selectfn(text){ //核心函數
var result=true;
for(var i=0;i<newli.length;i++) //遍歷用戶菜單，與當前菜單做對比，判斷是否已經選中
{
if(newli[i].innerHTML==text) //若對比成功說明已經選中該菜
{
alert('您已選取：'+newli[i].innerHTML);
return false;
}
}
return true;
}
}
</script>
</head>
<body>
<div>
<ul id="fa">
<h3>菜單：</h3>
<li>魚香肉絲</li>
<li>火爆肥牛</li>
<li>水煮肉片</li>
<li>麻辣烏魚</li>
<li>五香鴨珍</li>
<li>紅油牛肚</li>
</ul>
<ul id="so">
<h3>您的選擇：</h3>
</ul>
</div>
</body>
</html>其核心原理就是：點擊<li>標籤時，用該標籤的innerHTML與用戶菜單<li>標籤的innerHTML循環對比匹配，若沒有匹配則說明該標籤沒有被點擊過，那就在用戶菜單裏添加，若對比成功，說明用戶菜單已經有該標籤，也就是說已經選擇了該菜，那就不再往用戶裏添加，彈出“已經選擇該菜”提示框。
