<!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谢谢了。