使用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;

}