首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vanilla JS -通过单击按钮隐藏和显示div的功能

Vanilla JS是指纯粹的JavaScript,即没有依赖任何框架或库的纯原生JavaScript编程。在Web开发中,Vanilla JS可以用于实现各种功能和交互效果。

对于通过单击按钮隐藏和显示div的功能,可以使用Vanilla JS来实现。以下是实现该功能的示例代码:

HTML部分:

代码语言:txt
复制
<button id="toggleButton">Toggle Div</button>
<div id="myDiv">This is a div.</div>

JavaScript部分:

代码语言:txt
复制
// 获取按钮和div元素
var toggleButton = document.getElementById("toggleButton");
var myDiv = document.getElementById("myDiv");

// 添加点击事件的监听器
toggleButton.addEventListener("click", function() {
    // 切换div的显示和隐藏状态
    if (myDiv.style.display === "none") {
        myDiv.style.display = "block";
    } else {
        myDiv.style.display = "none";
    }
});

上述代码中,首先通过document.getElementById方法获取到按钮和div元素,并将其分别赋值给toggleButtonmyDiv变量。然后,使用addEventListener方法给按钮添加了一个点击事件的监听器。当按钮被点击时,监听器中的回调函数会执行。在回调函数中,通过判断div元素的style.display属性来切换其显示和隐藏状态。

这种通过单击按钮隐藏和显示div的功能常见于网页上的折叠展开效果或者切换内容显示的需求。

腾讯云相关产品中,与前端开发和Web应用部署相关的产品包括:

  1. 腾讯云云服务器(CVM):提供云端虚拟服务器,可以用于部署和运行Web应用。 产品链接:https://cloud.tencent.com/product/cvm
  2. 腾讯云轻量应用服务器(Lighthouse):提供轻量级、弹性可扩展的云端计算资源,适用于部署Web应用和API服务。 产品链接:https://cloud.tencent.com/product/lighthouse
  3. 腾讯云云开发(Cloud Base):提供一站式后端云服务,包括云函数、云数据库、云存储等,支持快速搭建和部署Web应用后端。 产品链接:https://cloud.tencent.com/product/tcb

以上是一些腾讯云相关产品的简介,适用于前端开发和Web应用部署的场景。使用这些产品可以帮助开发人员更方便地进行应用的开发、部署和运维工作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 用js实现一个div弹出图层

    用js实现一个弹出图层,具体效果: 点击按钮后弹出图层,图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题,弹出后背景页面不可点击、背景变灰。...所有代码不分开、放在一个html中显示。 以下是一个简单的JavaScript代码示例: <!...= "none"; document.body.style.overflow = "auto"; } 该代码使用了CSS样式,包含一个按钮和一个弹出图层...单击按钮将调用JavaScript函数来显示图层,并将背景页面设为不可点击状态。关闭按钮也是通过JavaScript函数来实现的,当用户单击关闭按钮时,它将隐藏弹出框并将背景页面状态还原。...如果想隐藏JS功能逻辑,可用JShaman对JS代码进行混淆加密,加密后的代码是密文状态,不可读、不可分析。

    7.4K50

    JQuery

    1显示隐藏功能 但凡有两个函数完成的功能是相反的,比如一个显示一个隐藏,那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词,那么肯定会有第三个单词,而且都和toggle有关。...hide()隐藏内容 show() 显示 toggle() 一下显示一下隐藏 括号中如果有参数,填数字(单位是毫秒),那么会有动画效果,如果不填,没有动画效果。 对比js和jq: <!...(){ // 找到按钮,绑定单击 找到div 隐藏 $('#btn').click(function(){ // $...-- 需求:按钮 div,按钮单击控制div隐藏 display:none style --> 按钮 div id="box"><...***常用动画函数 slideUp()隐藏 slideDown()显示 slideToggle() 一会显示一会隐藏 清除动画排队机制,在形成动画函数之前加stop() fadeIn() 淡入

    7.8K20

    如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...太糟糕了,因为单击浏览器的“后退”和“前进”按钮与浏览历史记录中的 URL 导航有关。如果没有 History API,就无法谈论路由。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在,每次我们单击按钮时,URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...这取决于你的程序。可以是任何东西。 使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。...它还应突出显示“current”按钮。 实施完毕后,你的路由就完成了。你如何选择重新加载 #content 元素中的内容完全取决于你自己和你的后端设计。

    3.9K20

    python测试开发django-188.Bootstrap折叠(Collapse)插件

    如果您想要单独引用该插件的功能,那么您需要引用 collapse.js, bootstrap已经包含了这个插件。...可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠(Collapse) 以使用带有属性的链接href或带有属性的按钮data-target。...单击下面的按钮以通过类更改显示和隐藏另一个元素: .collapse隐藏内容 .collapsing在过渡期间应用 .collapse.in显示内容 div> 实现效果,默认不展开 点击按钮后展开文本 如果想默认展开,可以通过 .collapse.in 属性控制 div class="collapse...在可折叠元素实际被隐藏之前(即在事件发生之前)返回给调用者。hidden.bs.collapse Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

    3K50

    WEB入门之十八 动画特效

    核心技能部分​ 8.1 显示/隐藏动画 在DOM中,可以通过样式属性display来控制元素的显示和隐藏,但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数,详见表8-1-1所示。...显示/隐藏 Ø fast:快速(在200毫秒内)显示/隐藏 Ø 自定义数字:开发人员可以自己设置一个数字表示速度,单位毫秒 下面通过一个示例来演示show和hide函数的用法,参考代码如下所示。...下面我们对上一个示例进行简单改造,单击按钮时,让图片显示;再次单击时,让图片隐藏;依次循环... ......下面我们通过动画函数回调来改造示例8.1,当图片隐藏时,按钮上的文字改为“显示”;当图片显示时,按钮上的文字改为“隐藏”。...,图片会在淡入和淡出动画之间进行切换,单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制 8.1 自定义动画 在前面讲过的诸多动画函数中,基本上都是通过改变元素的高度、宽度和透明度来实现动画的

    7610

    WEB入门之十八 动画特效

    核心技能部分 8.1 显示/隐藏动画 在DOM中,可以通过样式属性display来控制元素的显示和隐藏,但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数,详见表8-1-1所示。...显示/隐藏 Ø fast:快速(在200毫秒内)显示/隐藏 Ø 自定义数字:开发人员可以自己设置一个数字表示速度,单位毫秒 下面通过一个示例来演示show和hide函数的用法,参考代码如下所示。...下面我们对上一个示例进行简单改造,单击按钮时,让图片显示;再次单击时,让图片隐藏;依次循环... ......下面我们通过动画函数回调来改造示例8.1,当图片隐藏时,按钮上的文字改为“显示”;当图片显示时,按钮上的文字改为“隐藏”。...,图片会在淡入和淡出动画之间进行切换,单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制 8.1 自定义动画 在前面讲过的诸多动画函数中,基本上都是通过改变元素的高度、宽度和透明度来实现动画的

    15410

    Jump Start Bootstrap 第4章

    我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。...现在,我们有了一个简单的下拉菜单,在单击链接时显示菜单。我们可以在浏览器中查看它,如图所示。 ? 让我们结合使用下拉式插件和我们在前一章中创建的标签和按钮菜单。...警告消息 Bootstrap提供了一个非常有用的组件在网页的任何地方显示警告消息;你可以使用它们来显示成功消息、警告消息、失败消息、信息等;这些消息对访问者来说是恼人的,因此他们应该忽略添加的功能,让访问者能够隐藏它们...包裹体可以有三个类panel-collapse、collapse和in;类collapse用来折叠和隐藏面板中panel-body的内容,而in显示这些内容。...show属性用于通过JavaScript切换模式的可见性。当设置为true时,模式对话框将自动显示,不需要单击任何句柄元素。

    28.4K40
    领券