CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換

發(fā)布時(shí)間：2018-01-24 10:53:28 作者：ZMONE

在一些頁(yè)面我們需要使用兩個(gè)按鈕來(lái)回切換，怎么實(shí)現(xiàn)這樣的功能呢？下面小編給大家?guī)?lái)了CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換效果，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧

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ì)腳本之家網(wǎng)站的支持！