你不必定须要js，哪些被咱们经常忽略的css属性

css伪类选择器

1 :not

##:target CSS 伪类 表明一个惟一的页面元素(目标元素)，其ID与当前URL片断匹配
复制代码

/* 选择一个ID与当前URL片断匹配的元素*/

:target {   border: 2px solid black;    }复制代码

例如, 如下URL拥有一个片断 (以#标识的) ，该片断指向一个ID为section2的页面元素:

http://www.example.com/index.html#section2

若当前URL等于上面的URL，下面的元素能够经过 :target选择器被选中：

<section id="section2">Example</section>复制代码

组合起来能够实现好多，tab切换，侧边栏显隐，弹框显隐(input[type="checkbox"]+label[for]一样也能够哦,利用input type="radio",name为相同的，还能够作tab切换)

2:伪元素before after content值

<h1 data-text="It's loading…">It's loading…</h1>复制代码

h1:before {      content: attr(data-text); //before元素内容为It's loading… } 复制代码

代码仓库 总结未完，明天继续补充