ClassList implementiert die gemeinsame Nutzung von Beispielen für den Wechsel zwischen zwei Schaltflächenstilen

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit CSS classList den Umschalteffekt von zwei Schaltflächenstilen erzielen. Auf einigen Seiten müssen wir zwei Schaltflächen verwenden, um hin und her zu wechseln. Freunde, die es brauchen, können dem Herausgeber von Script House folgen, um gemeinsam zu lernen.

ClassList-Attributmethoden: add();remove();toggle();

Beschreibung: Auf einigen Seiten müssen wir zwei Schaltflächen verwenden, um hin und her zu wechseln, wie in der Abbildung gezeigt :

Wir müssen die Methoden add() und remove() verwenden

HTML-Teil:

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

JS-Teil:

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

CSS-Teil:

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

Verwandte Empfehlungen:

Detaillierte Erläuterung der Verwendung des classList-Attributs von HTML5 zum Betrieb von CSS-Klassen

9 empfohlene Inhalte für die Klassenliste

classList-Attribut in HTML5

Das obige ist der detaillierte Inhalt vonClassList implementiert die gemeinsame Nutzung von Beispielen für den Wechsel zwischen zwei Schaltflächenstilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!