Comment classList implémente la commutation de style à deux boutons

Ci-dessous, je partagerai avec vous un article utilisant classList pour implémenter la commutation entre deux styles de boutons. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Méthodes d'attribut ClassList : add();remove();toggle();

Description, sur certaines pages, nous devons utiliser deux boutons pour basculer d'avant en arrière, comme le montre la figure :

Nous devons utiliser les méthodes add() et remove()

partie html :

<p class="login-title">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="mya2" id="myaa" onclick="myonclick1()">登陆</a>
</p>

partie 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");
}

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment utiliser le didacticiel d'installation et de configuration de Babel

Comment configurer le fichier de configuration Babel dans vue-cli

Utilisez node.js pour implémenter la fonction de saisie automatique des enveloppes rouges de Douyin

Utilisez Webpack pour gérer le problème des fichiers bundle.js trop volumineux

Comment remplir l'avatar par défaut en javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!