你不必定須要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… } 複製代碼

代碼倉庫 總結未完，明天繼續補充