<!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. HMM的学习笔记1：前向算法

    HMM的学习笔记 HMM是关于时序的概率模型.描写叙述由一个隐藏的马尔科夫链随机生成不可观測的状态随机序列,再由各个状态生成不可观測的状态随机序列,再由各个状态生成一个观測而产生观測的随机过程. HM ...

  2. win7 下面使用任务计划程序执行php脚步

    1.操作系统中点击开始->所有程序->附件->系统工具->任务计划程序 2.如下图 3.下一步,如图: . 4.下一步,如图 5.下一步,如下图: 6.这样设置好以后,就可以了 ...

  3. java学习之部分笔记2

    1.变量 实例变量和局部变量 实例变量系统会自动初始化为0和null(string),局部变量必须设定初始值. 静态方法里只能引用静态变量 数据类型的自动转换! int—>long 2.构造方法 ...

  4. canvas模糊事件处理

    不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况: 具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变: 这里简单介绍个对象,window.devicePixelRa ...

  5. 【SQL语句】 - 在所有存储过程中查找关键字,关键字不区分大小写 [sp_findproc]

    USE [EShop]GO/****** Object: StoredProcedure [dbo].[sp_findproc] Script Date: 2015/8/19 11:05:24 *** ...

  6. html ul li 显示数据库

    方法1: function insert() { var str=""; var data="你的数据库数据"; str="<ul>< ...

  7. [转]C++实现系统服务暂停、停止、启动

    /* 名称:系统服务管理 语言:C++ 介绍:对Windows系统服务的状态获取,服务暂停,开启,停止操作代码 */ void CStartServiceDlg::OnBnClickedButton1 ...

  8. 使用mysqlbinlog工具进行基于位置或时间点的数据恢复

    使用mysqlbinlog工具进行基于位置或时间点的恢复 MySQL备份一般采取全备份加日志备份的方式,比如每天执行一次全备份,每小时执行一次二进制日志备份.这样在MySQL Server故障后可以使 ...

  9. HttpClient基础教程

    1.HttpClient相关的重要资料 官方网站:http://hc.apache.org/ API:http://hc.apache.org/httpcomponents-client-4.3.x/ ...

  10. android studio error configuration with name default not found

    Android Studio报错: android studio error configuration with name default not found 在进行sync的时候,提示Error: ...