Wie classList das Umschalten des Zwei-Tasten-Stils implementiert

Im Folgenden werde ich einen Artikel mit ClassList teilen, um den Wechsel zwischen zwei Schaltflächenstilen zu erreichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

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

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie das Babel-Installations- und Konfigurations-Tutorial

So konfigurieren Sie die Babel-Konfigurationsdatei in vue-cli

Verwenden Sie node.js, um Douyins automatische Funktion zum Greifen roter Umschläge zu implementieren

Verwenden Sie Webpack, um das Problem übermäßig großer bundle.js-Dateien zu packen und zu lösen

So geben Sie den Standard-Avatar in Javascript ein

Das obige ist der detaillierte Inhalt vonWie classList das Umschalten des Zwei-Tasten-Stils implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!