<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin: 0;
padding:0}
li{list-style: none;
height: 50px;
background: red;}
.active {
background: yellow;
color: white;}
#ul li{
width: 19%;
float: left;
text-align: center;
vertical-align: middle;
margin: 0 2px;
cursor: pointer;
}
</style>
<body>
<div>
<ul id="ul">
<li title="">1</li>
<li title="">2</li>
<li title="">3</li>
<li title="">4</li>
<li title="">5</li>
</ul>
</div>
<script>
var attr={data:[
{'工號':'011','模塊':'HHHYU-UUIU-1','權限':'N'},
{'工號':'011','模塊':'HHHYU-UUIU-2','權限':'Y'},
{'工號':'011','模塊':'HHHYU-UUIU-3','權限':'N'},
{'工號':'011','模塊':'HHHYU-UUIU-4','權限':'N'},
{'工號':'011','模塊':'HHHYU-UUIU-5','權限':'Y'}
]
}
//員工是后台通過處理了的,引用就會有模塊和權限2項
var m = attr.data;
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
if(m.length >0){ //判斷數據非空
for(var j=0;j<aLi.length;j++){
aLi[j].index = j;
aLi[j].setAttribute("title",m[j]['模塊']) //創建模塊title
aLi[j].onclick=function() {
aTitle = this.title;
if(m[this.index]["模塊"] == aTitle) //判斷模塊是否等於當前獲取的模塊
{
if(m[this.index]["權限"]=="Y"){ //判斷權限
this.className = "active";
}else{
alert("您沒有該權限!")
}
}else{
alert("您沒有該權限!")
}
}
}
}else{
alert("您沒有該權限!")
}
</script>
</body>
</html>
//其實里面還有些缺陷的:
第一:在創建title的時候,必須數據庫取出來的數據有5個模塊,不然中間少幾個模塊,相對應的順序就會改變了
注:有高手能搞定的或者其中還有什么問題,請發到836337706@qq.com謝謝了。