写Express接下来的内容前，先来一篇轻松点儿的文章，之前我总结过一篇关于nth-child&nth-of-type的文章（还记得那篇文章的结论吗？对，就是两句话）。这一篇我依然来处理一个有关CSS的问题。

说到tab切换，咱们很熟悉，最常用的做法是使用JS处理显示与隐藏，听说利用CSS3的伪类选择器也能实现相同的tab切换效果，于是我就试一把。

这个方法主要是借助input和checked属性控制其后面元素的显示与否，涉及到的需要搞懂的知识点就三个：

1、nth-of-type的使用

2、input的id和label的for属性联系

3、在css3中‘~’表示兄弟元素，‘+’表示相邻元素

下面是实例区：

知道了上面这三点，那这个问题就简单了，先看一下例子的DOM结构：

从上图可以看出DOM结构很简单，但是要注意两点，第一：input的id和label中的for对应（如tab1），第二：input必须和其内容div.tab在同一级，也就是说它们必须拥有同一个父元素。

下面看一下本例的重点部分，样式：

从样式代码上可以看出，当input处理checked时，通过“+”符给label加样式，使用nth-of-type定位，在通过“~”将对应的内容区设置为display:block。

如果想让这个切换看起来更动感，可以使用transition给切换加个动画。

写在最后的总结：

通过测试，这种方法在IE8下不兼容，这没关系，因为我们可以在H5开发中用的爽爽的。哈哈

短内容，说完整事，哪怕只读一篇也能学知识。点击关注小郑搞码事，说的都是那堆代码。谢谢您的鼓励！

平时做前端开发，对于页面切换、最小化、长时间不操作这些安全问题，其实接触不多，除非涉及到隐秘问题，可能需要将这些实现考虑进去。这次我接到这个需求时，也是处于懵逼状态

visibilityChange，这个在浏览器标签页被隐藏或显示的时候都会除非该方法，看似能满足页面切换或最小化。但是它有个问题，就是在页面缩放，下图绿色标识，而非最小化时也会执行该方法。

 document.addEventListener(visibilityChange, ()=> {
 let screenTop=window.localStorage.getItem('screenTop');
 // 隐藏时触发了2次
 setTimeout(()=> {
 // 采用screenTop，是因为缩放时也会触发该事件，无法区分是缩放还是最小化
 if (screenTop && screenTop==window.screenTop && document.visibilityState===hidden) {
 this.props.dispatch({
 type: 'SET_PAYROLL_STATUS',
 data: false
 })
 // window.location.href=window.location.href;
 } else {
 window.localStorage.setItem('screenTop', window.screenTop)
 }
 }, 0)
 }, false) 

上面代码中的判断screenTop==window.screenTop能将缩放这个排除在外，结合document.visibilityState能实现页面切换、页面最小化的时候修改状态保证页面内容安全，譬如通过设置状态为false，不展示设计安全的内容。

而判断长时间是否操作，主要是通过setInterval来倒计时变量count，如果有操作就将count初始化，从新倒计时。

hasOperate=(callback, second)=> { 
 let count=0;
 const countTime=()=> {
 timer=setInterval(()=> {
 if (document.visibilityState==='hidden') {
 count=0;
 // clearInterval(timer);
 }
 count++;
 if (count==second) {
 callback();
 clearInterval(timer);
 count=0
 }
 }, 1000);
 }

 let x;
 let y;

 document.addEventListener('mousemove', ()=> {
 let x1=event.clientX;
 let y1=event.clientY;
 if (x !=x1 || y !=y1) {
 count=0;
 }
 x=x1;
 y=y1;
 })

 document.addEventListener('keydown', ()=> {
 count=0;
 })

 document.addEventListener('scroll', ()=> {
 count=0;
 })

上面代码，主要通过统计count等于你设置的初始化时间second，进行回调，回调的主要内容是隐藏安全页面；如果在统计的过程中发现有滚动或鼠标移动以及键盘按下等相关操作，则将count初始化为0，酱紫就能完成长时间不操作的问题了