使用classList來實現兩個按鈕樣式的切換

classList屬性的方法：add();remove();toggle();

描述，在一些頁面我們需要使用兩個按鈕來回切換，如圖：

我們要使用到add()和remove()方法

html部分:

<div class="login-title">

<a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">註冊</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;

}