ClassList는 두 버튼 스타일 간 전환 예제 공유를 구현합니다.

이 기사에서는 주로 CSS classList를 사용하여 두 개의 버튼 스타일 전환 효과를 얻는 방법을 공유합니다. 일부 페이지에서는 두 개의 버튼을 사용하여 이러한 기능을 구현하는 방법이 있나요? 필요한 친구들은 Script House의 편집자를 따라가서 함께 배울 수 있습니다.

ClassList 속성 메소드: add();remove();toggle();

설명, 일부 페이지에서는 그림과 같이 두 개의 버튼을 사용하여 앞뒤로 전환해야 합니다.

필요합니다 add() 및 제거() 메서드를 사용하려면

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>

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

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

관련 추천:

HTML5 CSS 클래스 작동을 위한 classList 속성 사용에 대한 자세한 설명

9 HTML5의 classlist

classList 속성 권장 내용

위 내용은 ClassList는 두 버튼 스타일 간 전환 예제 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!