HTMLとCSSを使用してトグルボタンを作成するにはどうすればよいですか?

HTML と CSS を使用したトグル ボタンの作成

HTML と CSS を使用して、ロックの動作を持つトグル ボタンを作成することを目的としています。一度クリックすると押し込まれた状態になり、再度クリックすると解放されます。これを実現するには、次のアプローチを検討できます。

jQuery の使用

推奨されるアプローチは、JavaScript ライブラリである jQuery を使用して目的の動作を実現することです。 jQuery は、要素のクラスの 2 つの状態を切り替えることができる toggleClass() メソッドを提供します。これにより、「押された」状態と「解放された」状態で異なるスタイルを持つ 2 つのクラスを持つトグル ボタンを作成できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#button {
    /* Styling for released state */
}
#button.down {
    /* Styling for pushed state */
}
</style>
<script>
$(document).ready(function() {
    $('#button').click(function() {
        $(this).toggleClass("down");
    });
});
</script>

この例では、「button」要素は追加のクラス「」を受け取ります。 「down」をクリックすると、外観が「押された」状態に変わります。もう一度クリックすると、「ダウン」クラスが削除され、「リリース」状態に戻ります。

CSS と追加要素の使用

ほど簡単ではありませんが、 jQuery を使用すると、CSS と追加の HTML 要素を使用してトグル ボタンの動作を模倣することができます。このテクニックには、チェックボックスを使用し、ボタンのように見えるようにスタイルを設定することが含まれます。ただし、シームレスな外観を実現するには、状態の変更を処理するために追加のスパン、div、および JavaScript を使用する必要があります。

以上がHTMLとCSSを使用してトグルボタンを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。