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

一点用JS写控制权限的心得的更多相关文章

  1. php框架tp3.2.3和js写的微信分享功能心得，分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  2. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  3. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  4. JS写小游戏（一）：游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  5. TJI读书笔记09-访问控制权限

    TJI读书笔记09-访问控制权限 包,package和import 权限修饰符 接口和实现 类的访问权限控制 首先问一个问题,为什么要有访问控制权限? 安全,这当然是一个很重要的原因. 让类库的使用者 ...

  6. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  7. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  8. JAVA基础之訪问控制权限(封装)

    包:库单元 1.当编写一个Java源码文件时.此文件通常被称为编译单元(有时也被称为转译单元). 2.每一个编译单元都必须有一个后缀名.java,而在编译单元内则能够有一个public类,该类名称必须 ...

  9. vue用js部分控制动画实现

    上次我们提到用vue实现过渡动画,其实只讲了vue动画的一部分,用vue自带的css状态控制动画实现,不带js http://www.cnblogs.com/null11/p/7081506.html ...

随机推荐

  1. .net如何后台批量删除

    button_Click(Sender sender,Event e){foreach (DataListItem item in DataList1.Items){CheckBox cbox=(Ch ...

  2. WebService调用1（.Net）

    1.创建一个最简单的Web Service (1)  新建-项目-ASP.NET空WEB应用程序 (2)添加新项-WEB服务 默认会添加一个HelloWorld方法: using System; us ...

  3. NSArray 数组操作

    /*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...

  4. EntityFramework sum嵌套

    一个查询中 用到了 sum , 可是返回结果的小数有很多位 , 都不准确了..类似js中的小数运算一样...不太熟悉C#,不知道这问题是因为double的关系 , 还是因为代码写的问题 , 通过 sq ...

  5. ButterKnife你需要知道的点

    ButterKnife,这个方便findViewById而使用的库,无数的应用在使用它,以注解来实现的他,对应用的性能影响几乎可以忽略,可以放心使用. 使用: compile 'com.jakewha ...

  6. php微信公众帐号发送红包

    开发框架为we7 所需参数:appid,appSecret,MchId,API密钥 <?php /** * 微信红包的类 * */ CLASS WXHongBao { private $mch_ ...

  7. SQL 必备- ORACLE-SQSLSERVER-DB2时间函数及常见函数总结

    SQLSERVER 篇: 一.时间函数 --getdate 获取当前时间 select getdate() --dateadd 原有时间加: 2013-02-17 13:20:16 此时间加12个月 ...

  8. Java Thread 总结

    目  录   线程的概述(Introduction) 线程的定义(Defining) 1) 继承java.lang.Thread类 2) 实现java.lang.Runnable接口 线程的启动(St ...

  9. 在WPF中自定义你的绘制（二）

    原文:在WPF中自定义你的绘制(二)   在WPF中自定义你的绘制(二)                                                                 ...

  10. Cxf -Wsdl2java详细参数附录

    wsdl2java用法: wsdl2java -p com -d src -all  aa.wsdl -p  指定其wsdl的命名空间,也就是要生成代码的包名: -d  指定要产生代码所在目录 -cl ...