[解決済み] トグルボタンを作成する方法を教えてください。
2022-03-04 19:27:48
質問
htmlでcssを使ってトグルボタンを作りたいのですが、どうすればいいですか?クリックすると押し込まれたままになり、もう一度クリックすると飛び出すようにしたいのですが。
もし、CSSだけでは無理だとしたら。jQueryを使用して行う方法はありますか?
どのように解決するのですか?
セマンティックな方法としては、チェックボックスを使用し、チェックされている場合とされていない場合で異なる方法でスタイルを設定するのがよいでしょう。しかし、そのための良い方法はありません。スパンやディボを追加したり、javascriptを追加したりしなければなりません。
そこで、最良の解決策は、小さなjQuery関数と2つの背景画像を使って、ボタンの2つの異なるステータスをスタイリングすることです。例として、ボーダーによる上下のエフェクトを使用しています。
$(document).ready(function() {
$('a#button').click(function() {
$(this).toggleClass("down");
});
});
a {
background: #ccc;
cursor: pointer;
border-top: solid 2px #eaeaea;
border-left: solid 2px #eaeaea;
border-bottom: solid 2px #777;
border-right: solid 2px #777;
padding: 5px 5px;
}
a.down {
background: #bbb;
border-top: solid 2px #777;
border-left: solid 2px #777;
border-bottom: solid 2px #eaeaea;
border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>
もちろん、ボタンアップとボタンダウンを表現する背景画像を追加し、背景色を透明にすることもできます。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] Contact Form 7 のフォームで AJAX を有効にする(AJAX ロード後)。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】jQuery.addClassが動作しない。
-
[解決済み】Ajaxクロスオリジンリクエストがブロックされました。同一生成元ポリシーがリモートリソースの読み取りを不許可にする
-
[解決済み] jquery fadeIn が動作しない。
-
[解決済み] jQuery ValidateプラグインでaddMethodを使用する
-
[解決済み] ファイルをホストせずにホットリンクできるjQueryのバージョンはどこかにあるのでしょうか?
-
[解決済み] jQueryでページスクロールをプログラム的に無効にする方法
-
[解決済み] クラス別のjquery onclick
-
[解決済み] jQuery - クラスの代わりにIDを追加する
-
[解決済み] jQueryとIntraweb?
-
[解決済み] Uncaught TypeError: 未定義のプロパティ 'ajax' を読み取ることができません。