<!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. SSH框架-Caused by: org.hibernate.MappingException: column attribute may not be used together with <column> subelement

    昨晚修改了一些表关系,在相关的hbm.xml文件中做了改动,今天早上起来启动tomcat后,发现项目启动不了,控制台报错: 2015-6-14 9:09:42 org.apache.catalina. ...

  2. RAID技术介绍和总结

    简介 RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能有很清楚的认识和掌握.本文将对RAID技术进行介绍和总结,以期能尽量阐明其概念. RAID全称为独立磁盘冗 ...

  3. 那些 Cynthia 教我的事 之 PMSec (一)

    一.ViewState的使用 在项目中,我一直在用Common的方法读取一些信息,但是Cynthia习惯将它存入ViewState中. ViewState 它是由ASP.NET页面框架管理的一个隐藏的 ...

  4. 网页 php开发中html空文本节点问题user agent stylesheetbody

    最近开发中遇到一个奇怪的问题,我的一个网站头部,代码固定不变,放在了不同的模板进行展示,一部分出现了问题,总是距离相差8个像素,用firebug查看发现:meta 跑到 body 下面去了,并且发现了 ...

  5. BAK文件怎么恢复到数据库中

    1.右击SQLServer2000实例下的“数据库”文件夹.就是master等数据库上一级的那个图标.选择“所有任务”,“还原数据库” 2.在“还原为数据库”中填上你希望恢复的数据库名字.这个名字应该 ...

  6. Jq合成事件绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 004 range的用法

  8. [Linked List]Reorder List

    otal Accepted: 54991 Total Submissions: 252600 Difficulty: Medium Given a singly linked list L: L0→L ...

  9. Oprofile安装与使用探索

    本文分别尝试了oprofile在x86平台和龙芯平台上的安装 一:oprofile的安装与配置(intel+ubuntu12.04) I. Oprofile 安装 Oprofile 包含在 Linux ...

  10. Windows下安装PHP扩展及资源下载地址（memcached为例）

    官方下载的php安装包ext目录里以经包含了常用的php扩展,但某些情况下并不能满足我们项目需求,比如memcache扩展就不在官方的php安装包里.这时就需要我们自己去下载安装. 本文列出php官方 ...