ClassList implementiert die gemeinsame Nutzung von Beispielen für den Wechsel zwischen zwei Schaltflächenstilen-CSS-Tutorial-php.cn

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

小云云

Freigeben： 2018-01-27 10:08:12

Original

1794 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!