Comment classList implémente la commutation de style à deux boutons-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-09 17:22:41

original

1569 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion