迹忆客 专注技术分享

本篇文章将介绍几种隐藏 HTML 按钮并使用 onclick 事件使它们可见的方法。

使用 CSS display 属性在 HTML 中显示隐藏的按钮

我们可以先通过将其显示属性设置为 none 来隐藏 HTML 按钮。 然后，我们可以使用 JavaScript 将显示属性设置为内联或阻塞。

显示属性内联或块将显示隐藏的 HTML 按钮。 display:inline 和 display:block 的区别在于，inline 组件在一行或一行中可以有两个或多个组件。

但是块组件在一行或一行中只能有一个组件。

例如，创建一个按钮并将其命名为 Show。 将按钮的 onclick 属性设置为 makeChange()。

单击 Show 按钮调用 makeChange() 函数。 然后创建其他三个按钮并将它们命名为 Button1、Button2 和 Button3。

设置Button1的id为b1，Button2的id为b2，Button3的id为b3。 在 CSS 中，通过按钮的 id 选择按钮并将显示属性设置为无。

接下来，在 JavaScript 中，创建一个函数 makeChange()。 在该函数内，将每个按钮的显示属性设置为块。

通过其 id 选择特定按钮作为第一个按钮的 document.getElementById("b1")。 然后，通过将 document.getElementById("b1")style.display 分配给块来设置显示。

对其他两个按钮重复此操作。

示例代码：

<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 结构。

将按钮的显示属性设置为无后，在 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();
}