今天是一個css3模擬jq點擊事件，因為我發現，css3中沒有類似于，js的點擊事件，那么，可不可以仿照jq的效果，類似的做一個呢？主要用到,input里面的radio 單選按鈕，然后后面跟一個a標簽，讓radio覆蓋在a上，那為什么不直接把 a放在radio上面呢？因為選擇器 + 好選擇嘛，用radio的功能，a來修飾按鈕樣式，再把radio 隱藏，這里要用opacity（透明度）
這就是，主要原理！
上視圖吧
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .fd{ width: 100%; height: 100px; margin-top: 200px; position: fixed; } input,a{ width: 33.33%; height: 100px; position: absolute; font-size: 30px; font-weight: 700; cursor:pointer; } a{ display: block; color: #000; text-align: center; line-height: 100px; z-index: 10;/*要覆蓋嘛，當然需要層級關系*/ border-radius: 20px; } input{ z-index: 100;/*要覆蓋嘛，當然需要層級關系*/ opacity:0; } input:checked + a{ background: rgba(0,0,0,0.5); } #a1,#a1+a{ left: 0%; } #a2,#a2+a{ left: 33.33%; } #a3,#a3+a{ left: 66.66%; } </style> </head> <body> <!--單選按鈕的時候，name要統一 原理就是，把input覆蓋在a上，然后再把input透明度為0隱藏； 然后，按鈕的樣式由a標簽來控制。input上，a下，是因為； 選擇器 + 容易選到。 --> <div class="fd"> <input type="radio" name="單選" id="a1" /> <a href="#">css</a> <input type="radio" name="單選" id="a2" /> <a href="#">html</a> <input type="radio" name="單選" id="a3" /> <a href="#">javascript</a> </div> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
