classList が 2 つのボタン スタイルの切り替えを実装する方法

今回はclassListを使って2つのボタンスタイルの切り替え方法を実現する記事を紹介しますので、参考になれば幸いです。

ClassList 属性メソッド: add();remove();toggle();

説明、一部のページでは、図に示すように、2 つのボタンを使用して前後に切り替える必要があります。 add() メソッドとremove() メソッドを使用する必要があります

html 部分:

<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 部分:

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

上記は私があなたのためにまとめたものが、将来皆さんのお役に立てば幸いです。

関連記事:

babelのインストールと設定チュートリアルの使い方

vue-cliでbabel設定ファイルを設定する方法

Douyinの自動赤封筒機能を実装するにはnode.jsを使用してください

パッケージング用の webpack Bundle.js ファイルが大きすぎる問題への対処

JavaScript でデフォルトのアバターを入力する方法

以上がclassList が 2 つのボタン スタイルの切り替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。