HTML ボタンを非表示にし、Onclick を使用して表示する
このチュートリアルでは、HTML ボタンを非表示にし、onclick イベントを使用して表示する方法をいくつか紹介します。
CSS の display プロパティを使用して、非表示のボタンを HTML で表示する
display プロパティを none に設定することで、最初に HTML ボタンを非表示にできます。 次に、JavaScript を使用して display プロパティを inline または block に設定できます。
表示プロパティ inline または block は非表示の HTML ボタンを表示します。 display: inline と display: block の違いは、インライン コンポーネントは 1 行または 1 行に 2つ以上のコンポーネントを持つことができるということです。
ただし、block コンポーネントは、1 行または 1 行に 1つのコンポーネントしか持つことができません。
たとえば、ボタンを作成し、Show という名前を付けます。 ボタンの onclick 属性を makeChange() に設定します。
makeChange() 関数は、Show ボタンをクリックすると呼び出されます。 次に、他の 3つのボタンを作成し、Button1、Button2、Button3 という名前を付けます。
Button1 の id を b1、Button2 を b2、Button3 を b3 に設定します。 CSS で、id でボタンを選択し、display プロパティを none に設定します。
次に、JavaScript で関数 makeChange() を作成します。 その関数内で、各ボタンの表示プロパティを block に設定します。
最初のボタンの document.getElementById("b1") として id で特定のボタンを選択します。 次に、document.getElementById("b1")style.display を block に割り当てて、display を設定します。
他の 2つのボタンについても同じ手順を繰り返します。
コード例:
<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>
#b1, #b2, #b3 {
display: none;
}
function makeChange() {
document.getElementById('b1').style.display = 'block';
document.getElementById('b2').style.display = 'block';
document.getElementById('b3').style.display = 'block';
}
jQuery の show() メソッドを使用して、非表示のボタンを HTML で表示する
jQuery show() 関数を使用して、非表示の HTML 要素を表示することもできます。 show() 関数は、display プロパティが none に設定されている選択された HTML コンポーネントのみを表示します。
visibility プロパティが none に設定されている HTML 要素では機能しません。 上記と同じ方法でボタンを非表示にします。
上記の方法で使用した HTML 構造も再利用します。
ボタンの display プロパティを none に設定した後、JavaScript で makeChange() 関数を作成します。 関数内で、id を持つボタンを選択し、jQuery show() メソッドを $('#b1, #b2, #b3').show() として呼び出します。
表示ボタンをクリックすると、隠れていたボタンが表示されます。 したがって、jQuery の show() メソッドを使用して、非表示のボタンを HTML で表示できます。
コード例:
<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>
#b1, #b2, #b3 {
display: none;
}
function makeChange() {
$('#b1, #b2, #b3').show();
}