<!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. linux下tar.xz 文件解压

    在linux下下载源码文件安装时有些会遇到tar.xz文件的解压,习惯了tar解压缩,第一次遇到.xz文件还是有点迷惑,google 如下,解压这种格式的文件需要xz工具,如果xz工具没有安装,则安装 ...

  2. MySQL整数类型说明 int(11) vs int(20)

    整数类型后面跟的是显示的宽度.M指示最大显示宽度.最大有效显示宽度是255.显示宽度与存储大小或类型包含的值的范围无关. 实践出真知: mysql> create table test2 ( a ...

  3. AjaxHelper创建的ajax无效，JQuery直接方法post有效，原来是Microsoft.jQuery.Unobtrusive.Ajax错误，NuGet解决

    Get-Package -ListAvailable -Filter Microsoft.JQuery Microsoft.jQuery.Unobtrusive.Ajax –Version 3.2.0

  4. Eclipse自动生成作者、日期注释等功能设置(转载)

    在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Co ...

  5. 第二章实例：ArrayAdapter结合ListView列表视图

    package mydefault.packge; import com.example.codeview.R; import android.app.Activity; import android ...

  6. Android_xml背景色的值

    点击(此处)折叠或打开 <?xml version="1.0" encoding="utf-8" ?> <resources> < ...

  7. 安装Cocoapoads遇到的问题的解决办法

    错误一.首先来个错误截图

  8. JSP 实现 之 读取数据库显示图片

    用JSP从数据库中读取图片并显示在网页上 环境mysql+tomcat: <1>先在mysql下建立如下的table. 并insert图像. mysql.sql文件如下: ) unsign ...

  9. java基础之 第一步 ：jdk安装配置

    Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...

  10. 屏蔽鼠标右键功能JS

    <script language="Javascript">     function hiderightKey(){    return false; } docum ...