微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > js教程 > 正文

javascript如何显示隐藏div

coldplay.xixi
发布： 2021-04-06 15:55:08
原创
3632人浏览过
javascript显示隐藏div的方法：创建一个showhidediv的方法，直接跟ID属性调用，代码为【var sbtitle=document.getElementById(id)】。

javascript如何显示隐藏div

本教程操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。

javascript显示隐藏div的方法：

1、创建一个showhidediv的方法，直接跟ID属性调用；

<script language="javascript">
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
   if(sbtitle.style.display=='block'){
   sbtitle.style.display='none'; 
   }else{
   sbtitle.style.display='block';
   }
}
}
</script>
登录后复制

2、HTML页面结构

芦笋演示
芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

芦笋演示 34
查看详情 芦笋演示

立即学习“Java免费学习笔记（深入）”；

<a onMouseMove='showhidediv("baip")';> 点我  </a>
<div id="baip"style="display:none;">隐藏显示的DIV</div>
登录后复制

相关免费学习推荐：javascript视频教程

以上就是javascript如何显示隐藏div的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：javascript中this的用法有哪些 下一篇：javascript如何删除所有的cookie
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js单例模式如何理解 单例模式的核心是确保一个类或对象在整个应用中只有一个实例并提供全局访问点。它主要用于解决多个地方需要共享同一状态或资源的问题，如配置管理、日志记录、数据库连接等。JavaScript中常见的实现方式包括：1.对象字面量——天然单例；2.闭包+构造函数——通过判断实例是否存在来控制唯一性；3.ES6模块——默认导出的对象在多次导入时仍为同一实例。尽管单例便于状态共享，但也存在耦合度高、难以测试、隐藏依赖等问题，因此建议优先使用依赖注入而非硬编码单例。理解“唯一实例”和“状态共享”的设计初衷比套用模
2025-11-06 07:59:27
199
使用JavaScript实现一个简单的自动完成组件_javascript UI组件 自动完成组件通过监听输入事件过滤数据并显示匹配建议。首先创建输入框和隐藏的下拉列表，使用CSS定位与样式控制外观；JavaScript定义数据源，实时匹配用户输入并动态渲染建议项，支持点击选中和外部点击关闭。可扩展异步加载、键盘导航、高亮匹配及防抖优化。
2025-11-06 06:15:22
615
JavaScript 拖放 API：实现元素的拖放交互功能 要实现拖放功能需设置draggable="true"，并通过dragstart、dragover、drop等事件配合dataTransfer传递数据，其中dragover必须调用preventDefault才能触发drop。
2025-11-06 04:33:24
867
JavaScript与SpringBoot命令行Runner结合的方法 SpringBoot可通过调用Node.js执行JavaScript。1.使用ProcessBuilder运行外部JS文件，适合复杂逻辑；2.Java8-14可用Nashorn引擎执行简单脚本，但不支持npm模块；3.推荐将JS逻辑封装为独立微服务，SpringBoot启动时通过WebClient调用API通信，实现前后端分离与解耦。
2025-11-06 03:43:15
218
js状态模式是什么 状态模式通过封装对象状态及其行为，使对象在内部状态改变时改变其行为，避免复杂条件判断。上下文（如Light）持有当前状态，并将状态相关操作委托给具体状态对象处理；具体状态（如OnState、OffState）实现各自行为逻辑并可切换状态。示例中灯的开关通过press方法触发不同行为，无需if/else判断。优点包括消除条件逻辑、提升扩展性与职责清晰，适用于多状态场景如订单流程、按钮状态、游戏角色动作等，增强代码可维护性与灵活性。
2025-11-06 01:09:27
656
js外观模式的介绍 外观模式是通过创建高层接口简化复杂系统调用的设计模式。它封装多个子系统操作，如将事件绑定、数据加载和DOM渲染整合为一个初始化方法，使客户端无需了解内部细节，仅通过统一接口（如pageInitFacade.init()）即可完成调用，从而降低使用复杂度、实现解耦并提升可维护性，常用于浏览器兼容处理、多API组合调用等场景。
2025-11-06 00:33:10
438
JavaScript如何使用模板字符串_JavaScript模板字符串语法与嵌入变量方法 模板字符串使用反引号定义，支持多行文本和嵌入变量，通过${}插入变量或表达式，可提升代码可读性与编写效率。
2025-11-06 00:25:36
258
使用Geolocation API获取用户地理位置_javascript技巧 GeolocationAPI可用于获取用户位置，适用于天气、地图等场景；使用时需用户授权且页面运行在HTTPS环境下；通过getCurrentPosition()获取一次位置，watchPosition()持续追踪，并可调用clearWatch()停止监听；需处理权限拒绝、定位不可用、超时等错误情况。
2025-11-05 23:55:02
788
JavaScript 自定义事件：创建与分发自定义 DOM 事件 自定义事件通过CustomEvent创建，配合dispatchEvent分发和addEventListener监听，实现组件间解耦通信。1.使用newCustomEvent(‘name’,{bubbles,cancelable,detail})定义事件；2.调用element.dispatchEvent(event)触发；3.用addEventListener(‘name’,handler)接收，可跨组件传递数据，适用于表单验证等场景。
2025-11-05 23:54:02
787
现代JavaScript模块化开发实践与演进 JavaScript模块化从早期全局污染问题演进到ESModules标准，历经IIFE、CommonJS、AMD等方案，最终通过import/export实现静态分析、循环引用处理及跨平台支持，结合Webpack、Vite等工具优化开发流程，成为现代前端工程化核心基础。
2025-11-05 23:53:02
543
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部