css3-pointer-events_demo
该demo定义了一个菜单，点击了一次之后就不能再点击，另外其中也用到了flex布局，可直接将代码复制运行即可
<html>
<head>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
<meta charset="utf-8" />
<style>
*{
margin:0px;
padding:0px;
}
li{
list-style:none;
}
.menu{
display:flex;
flex-flow: row nowrap;
width:800px;
height:30px;
background:gray;
margin:20px;
}
.menu li{
width:20%;
height:100%;
margin-left:5px;
background:green;
text-align:center;
color:#fff;
line-height:30px;
cursor:pointer;
-moz-user-select:none;
}
.menu li:nth-child(1){
margin:0px;
}
.menu li:hover{
color:#fff;
background:#f00;
}
.pointer{
pointer-events:none;
}
</style>
</head>
<body>
<ul class="menu">
<li>首页</li>
<li>产品中心</li>
<li>新闻中心</li>
<li>公司简介</li>
<li>联系我们</li>
</ul>
<div id="divContent"></div>
<script>
var divContent=document.getElementById("divContent");
document.getElementsByTagName("ul")[0].addEventListener("click",function(e){
var currentObj=e.target;
if(currentObj.tagName.toLowerCase()=="li"){
var childList=document.getElementsByTagName("ul")[0].childNodes;
for(var i=0;i<childList.length;i++){
childList[i].className="";
}
currentObj.className=" pointer";
divContent.innerHTML=currentObj.innerHTML;
console.log(divContent.innerHTML);
}
})
</script>
</body>
</html>
css3-pointer-events_demo的更多相关文章
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 吐血大奉献，打造cnblogs最新最火辣的css3模板（IE9以下请勿入内） -- 第一版
一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...
- CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS3新特性应用之用户体验
一.光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:none即可. 完整代码: curosr: u ...
- jQuery+css3侧边栏导航菜单
效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...
- 一个简单的CSS3+js 实现3D BOX
<!doctype html><html><head> <meta charset="UTF-8"> <title>Do ...
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- html5+css3+jquery完成响应式布局
响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...
- CSS3 制作一个边框向周围散开的按钮效果
我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...
随机推荐
- java实现第六届蓝桥杯移动距离
移动距离 题目描述 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3- 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 ...
- Okapi BM25算法
引言 Okapi BM25,一般简称 BM25 算法,在 20 世纪 70 年代到 80 年代,由英国一批信息检索领域的计算机科学家发明.这里的 BM 是"最佳匹配"(Best M ...
- struts 通配符的使用
使用通配符可以将配置量降到最低,十分方便 新建一个javaweb项目 在项目中加入Struts.xml( 选中项目右键MyEclipse-->project facets-->Struts ...
- 一篇关于Android M以后权限介绍的不错的文章
文章地址:http://www.jianshu.com/p/e1ab1a179fbb/
- 一网打尽枚举操作 .net core
本文介绍如何使用枚举以及,如何将枚举类型更好的应用于项目中,看完本文可以有序的将项目中的枚举更容易的使用到每个角落. 1,分析枚举 /// <summary> /// 性别 /// < ...
- CSS里盒子模型中【margin垂直方向边界叠加】问题及解决方案
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合. 如果都是正边界,结果的边界宽度是 ...
- （七）POI-读取excel，遍历一个工作簿
原文链接:https://blog.csdn.net/class157/article/details/92816169,https://blog.csdn.net/class157/article/ ...
- 详说tcp粘包和半包
tcp服务端和客户端建立连接后会长时间维持这个连接,用于互相传递数据,tcp是以流的方式传输数据的,就像一个水管里的水一样,从一头不断的流向另一头. 理想情况下,发送的数据包都是独立的, 现实要复杂一 ...
- Fabric网络组织与主节点选举
一.Fabric网络组织 Fabric网络组织按如下结构组成:Fabric网络-->Channel通道-->组织(成员)-->节点.即整个网络由数个通道组成,每个通道都由多个组织构成 ...
- SLS编写规范
SLS编写规范 规范要点说明 首先,状态的执行不可回滚,执行完了就是执行完了,并不会中断回滚,其次,状态的执行,可以反复执行,也就是说一个状态文件,可以多次来进行调用. 在编写状态文件过程中,有以下几 ...