使用classList来实现两个按钮样式的切换方法

使用classList来实现两个按钮样式的切换方法

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

描述，在一些页面我们需要使用两个按钮来回切换，如图：

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

html部分:

注册</a>

登陆

js部分:

funchttp://ction myonclick(){

documehttp://nt.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;

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。