迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > HTML >

HTML 隐藏按钮并使用 Onclick 显示它们

作者:迹忆客 最近更新:2023/05/05 浏览次数:

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


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

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

显示属性内联或块将显示隐藏的 HTML 按钮。 display:inlinedisplay: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();
}

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

HTML 中的 role 属性

发布时间:2023/05/06 浏览次数:124 分类:HTML

本篇文章介绍 HTML role属性。HTML中 role 属性介绍,role 属性定义描述语义的 HTML 元素的角色。

在 HTML 中打印时分页

发布时间:2023/05/06 浏览次数:188 分类:HTML

本篇文章介绍如何在打印 HTML 页面或内容时强制分页。将 page-break-after 属性设置为 always Inside @media print to Page Break in HTML

在 HTML 中显示基于 Cookie 的图像

发布时间:2023/05/06 浏览次数:154 分类:HTML

本文介绍如何根据 HTML 中的 cookies 显示图像。根据 HTML 中设置的 Cookies 显示图像。问题陈述是我们需要根据网页传递的cookie来显示特定的图像。

在 HTML 中创建下载链接

发布时间:2023/05/06 浏览次数:140 分类:HTML

本文介绍如何在 HTML 中创建下载链接。使用 download 属性在 HTML 中创建下载链接.。我们可以使用 HTML 锚元素内的下载属性来创建下载链接。

HTML 中的 ::before 选择器

发布时间:2023/05/06 浏览次数:70 分类:HTML

本教程介绍 CSS ::before 伪元素。CSS ::before 伪元素。 ::before 选择器是一个 CSS 伪元素,我们可以使用它在一个或多个选定元素之前插入内容。 它默认是内联的。

在 HTML 中创建一个可滚动的 Div

发布时间:2023/05/06 浏览次数:54 分类:HTML

本篇文章介绍如何使 HTML div 可滚动。本文将介绍在 HTML 中使 div 可滚动的方法。 我们将探索垂直和水平滚动,并通过示例查看它们的实现。

HTML 显示箭头的代码

发布时间:2023/05/06 浏览次数:153 分类:HTML

一篇关于用于显示箭头的 Unicode 字符实体的紧凑文章。本文讨论使用 Unicode 字符实体在我们的 HTML 页面上显示不同的字符。 HTML 中使用了许多实体,但我们将重点学习表示上、下、左、右的三角

在 HTML 中启用和禁用复选框

发布时间:2023/05/06 浏览次数:149 分类:HTML

本篇文章介绍如何启用和禁用 HTML 中的复选框。HTML 中的复选框 复选框是一个交互式框,可以切换以表示肯定或否定。 它广泛用于表单和对话框。

HTML 中的只读复选框

发布时间:2023/05/06 浏览次数:198 分类:HTML

本篇文章介绍了如何在 HTML 中制作只读复选框。本文是关于如何使 HTML 复选框控件成为只读组件的快速破解。 但是,首先,让我们简要介绍一下复选框控件。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便