你不一定需要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…    }