Classlist implements two-button style switching instance sharing

This article is mainly to share with you CSS using classlist to achieve two button style switching effect, on some pages we need to use two buttons to switch back and forth, how to achieve such a function? Friends who need to follow the script of the small to learn together.

Method of Classlist Property: Add (); remove (); toggle ();

Description, on some pages we need to switch back and forth using two buttons,

We're going to use the Add () and remove () methods

HTML section:

<p class= "Login-title" ><a href= "javascript:void (0)" class= "Mya1" id= "Mya" onclick= "Myonclick ()" > Register </ A><a href= "javascript:void (0)" class= "Mya2" id= "Myaa" onclick= "Myonclick1 ()" > Login </a></p>

JS section:

Funcction Myonclick () {document.getElementById ("Mya"). Classlist.remove ("newClassName1");d Ocument.getelementbyid ( "Myaa"). Classlist.remove ("Newclassname");} function Myonclick1 () {document.getElementById ("Mya"). Classlist.add ("newClassName1");d Ocument.getelementbyid (" Myaa "). Classlist.add (" Newclassname ");}

CSS section:

. 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;}