ClassList implémente le partage d'exemples de commutation entre deux styles de boutons-tutoriel CSS-php.cn

ClassList implémente le partage d'exemples de commutation entre deux styles de boutons

小云云

Libérer： 2018-01-27 10:08:12

original

1832 Les gens l'ont consulté

Cet article explique principalement comment utiliser CSS classList pour obtenir l'effet de commutation de deux styles de boutons. Sur certaines pages, nous devons utiliser deux boutons pour basculer d'avant en arrière. Comment réaliser cette fonction ? Les amis qui en ont besoin peuvent suivre l'éditeur de Script House pour apprendre ensemble.

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)" class="mya1" id="mya" onclick="myonclick()">注册</a>
<a href="javascript:void(0)" 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