classList屬性的方法：add();remove();toggle();
描述，在一些頁(yè)面我們需要使用兩個(gè)按鈕來(lái)回切換，如圖：
我們要使用到add()和remove()方法
html部分:
| <div class="login-title"><a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注冊(cè)</a><a href="javascript:void(0)" class="mya2" id="myaa" onclick="myonclick1()">登陸</a></div> |
js部分:
| funcction myonclick(){document.getElementById("mya").classList.remove("newClassName1");document.getElementById("myaa").classList.remove("newClassName");}function myonclick1(){document.getElementById("mya").classList.add("newClassName1");document.getElementById("myaa").classList.add("newClassName");} |
css部分:
| .login-title{width:200px;height:200px;margin: 0 auto;background-color:antiquewhite;}.mya2{padding: 0 20px 10px 20px;color:#FFFFFF;font-size:22px;text-decoration:none;}.mya1{padding:0 20px 10px 20px;color:#7F4A88;font-size:22px;text-decoration:none;border-bottom:2px solid #7F4A88;}.newClassName{padding:0 20px 10px 20px;color:#7F4A88;font-size:22px;text-decoration:none;border-bottom:2px solid #7F4A88;}.newClassName1{padding: 0 20px 10px 20px;color:#FFFFFF;font-size:22px;text-decoration:none;} |
總結(jié)
以上所述是小編給大家介紹的CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
