使用css实现点击切换效果
使用css制作簡(jiǎn)單的點(diǎn)擊切換效果，參考了以下教程：css實(shí)現(xiàn)的輪播和點(diǎn)擊切換(無(wú)js版)
首先先制作一個(gè)容器，用來(lái)容納所顯示的內(nèi)容：
HTML代碼：
<html></html> <head><meta charset="utf-8"> <link href="css/test.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="contain"><ul><li></li><li></li><li>/li></ul> </div> </body> </html>
CSS代碼：
.contain{position: relative;margin:auto;width: 600px;height: 200px;text-align: center;font-family: Arial;color: #FFF;}接下來(lái)，根據(jù)需要設(shè)置ul的長(zhǎng)度，這里先制作三個(gè)切換窗口，因此將ul的寬度設(shè)置為容器寬度的300%，li即為每次切換時(shí)顯示的子元素，寬度設(shè)置為顯示容器的100%；
HTML代碼：
<div class="contain"><ul><li class="sildeInput-1">one-點(diǎn)擊切換</li><li class="sildeInput-2">two-點(diǎn)擊切換</li><li class="sildeInput-3">three-點(diǎn)擊切換</li></ul> </div>CSS代碼：
.contain ul{margin:10px 0;padding:0;width: 1800px; } .contain li{float: left;width: 600px;height: 200px;list-style: none;line-height: 200px;font-size: 36px; } .sildeInput-1{background: #9fa8ef; }.sildeInput-2{background: #ef9fb1; }.sildeInput-3{background: #9fefc3; }
效果如下:
可以看到，多出來(lái)的部分也被顯示出來(lái)了，此時(shí)就要給顯示窗口設(shè)置overflow:hidden;屬性，將多出來(lái)的部分隱藏起來(lái)
CSS代碼：
可以看到，多出來(lái)的部分全部被隱藏起來(lái)了，這樣，我們就可以通過(guò)修改ul的margin-left屬性值實(shí)現(xiàn)簡(jiǎn)單的切換效果。
接下來(lái)寫三個(gè)單選框用于切換，因?yàn)樾枰獙?shí)現(xiàn)點(diǎn)擊之后才進(jìn)行切換的效果，此時(shí)將lable指向相應(yīng)的input標(biāo)簽的id并使用偽類:checked來(lái)實(shí)現(xiàn)選擇切換的效果。
HTML代碼：
<div class="contain"><input type="radio" name="sildeInput" value="0" id="Input1" hidden><label class="label1" for="Input1">1</label><input type="radio" name="sildeInput" value="1" id="Input2" hidden><label class="label2" for="Input2">2</label><input type="radio" name="sildeInput" value="1" id="Input3" hidden><label class="label3" for="Input3">3</label><ul><li class="sildeInput-1">one-點(diǎn)擊切換</li><li class="sildeInput-2">two-點(diǎn)擊切換</li><li class="sildeInput-3">three-點(diǎn)擊切換</li></ul> </div>CSS代碼
.label1{position: absolute;bottom: 10px;left: 0px;width: 20px;height: 20px;margin: 0 10px;line-height: 20px;color: #FFF;background: #000;cursor: pointer; }/*用于調(diào)整單選框的屬性以及位置*/ .label2{position: absolute;bottom: 10px;left: 30px;width: 20px;height: 20px;margin: 0 10px;line-height: 20px;color: #FFF;background: #000;cursor: pointer; }/*用于調(diào)整單選框的屬性以及位置*/ .label3{position: absolute;bottom: 10px;left: 60px;width: 20px;height: 20px;margin: 0 10px;line-height: 20px;color: #FFF;background: #000;cursor: pointer; }/*用于調(diào)整單選框的屬性以及位置*/ #Input1:checked~ul{ margin-left: 0;}/*第一張點(diǎn)擊切換*/ #Input1:checked~.label1{ background: #535353;}/*點(diǎn)擊后改變單選框顏色*/ #Input2:checked~ul{ margin-left: -600px;}/*第二張點(diǎn)擊切換*/ #Input2:checked~.label2{ background: #535353;}/*點(diǎn)擊后改變單選框顏色*/ #Input3:checked~ul{ margin-left: -1200px;}/*第三張點(diǎn)擊切換*/ #Input3:checked~.label3{ background: #535353;}/*點(diǎn)擊后改變單選框顏色*/效果如下：
最后，再給ul標(biāo)簽添加transition:all 0.5s;屬性，設(shè)置0.5秒的平滑過(guò)渡
css代碼：
.contain ul{transition:all 0.5s;}這樣，就可以實(shí)現(xiàn)頁(yè)面的平滑切換了。
demo頁(yè)面：www.shijiewubaiqiang.top/old/test/test-2.html
轉(zhuǎn)載于:https://www.cnblogs.com/halftion/p/9470357.html
總結(jié)
以上是生活随笔為你收集整理的使用css实现点击切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 全链路设计与实践
- 下一篇： 5whys分析法在美团工程师中的实践