0

0

html学习

php中文网

php中文网

发布时间:2016-06-24 11:46:49

|

1428人浏览过

|

来源于php中文网

原创

元素隐藏

在html中我们经常需要把某些元素隐藏起来,有时候我们需要临时隐藏页面,让其他元素显示,来完成操作。有时候有些信息我们需要传给js,但是又不想给用户看,所以也会隐藏起来。

display/visibility方法

在html中有这两个方法都可以隐藏元素。

先上一段html代码,然后进行操作。

  • html代码
  • <!DOCTYPE html>    <head>        <title>aliens</title>        <script src="./js/jquery-2.1.1.js"></script>    </head>    <body>        <form>            <label for="firstname" id="firstname">first name:</label>            <input type="text" id="firstinput" name="firstname"></input><br/>        </form>        <button id="submit" value="submit-btn">submit</button>    </body></html>

    上面的代码很简单,就是一个label input submit button一共就这四个元素。

  • display代码
  • <style>    #firstname{ display: none; }</style>

    这个是让id为firstname的元素隐藏起来的代码了。
    是不是很简单。还有一个办法:

    立即学习前端免费学习笔记(深入)”;

  • visibility方法
  • <style> #firstname{ visibility: hidden; /*visibility: visible; 这个是显示的代码*/ } </style>

    这样也隐藏了。

    两种方法的区别

    第一种display的方法是隐藏的更彻底一点。也就是说隐藏之后的元素在页面上不占空间了。排版的元素会依次移动把之前元素所占空间全部用掉。

    第二种就仅仅是不可见了。但是页面上所占的位置还是它自己的,不会被其他元素所用掉。

    这两种方法都可以被JQuery选择器所选择

    jquery的hide()和show()

    这个比较简单了。
    看下面代码

    课游记AI
    课游记AI

    AI原生学习产品

    下载
    $('#firstname').hide();

    这样就是把这个元素隐藏了。
    同理:

    $('#firstname').show();

    这样就把元素显示了。

    很有意思的是,这两个函数都有参数的。
    下面是使用方法:

    $('#firstname').hide('slow/400/fast', function() {        //do something after hide });

    第一个参数就是选择隐藏的时间slow / 400 / fast,第二个参数是一个回调函数,来告知浏览器在隐藏元素之后,继续的下一个动作是什么。

    例子:

    $('#firstname').hide('400', function() {        alert("I have been hidden");});

    这样就OK了。

    input元素隐藏

    实际上上面的方法都可以隐藏Input元素,但是input有更简单的方法。
    如下代码:

    <input type="hide" value="val" id="inputid" />

    这样子就够了!!
    是不是特别简单,所以在仅仅需要很简单的信息的时候,隐藏起来用这个就可以了。

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    batoto漫画官网入口与网页版访问指南
    batoto漫画官网入口与网页版访问指南

    本专题系统整理batoto漫画官方网站最新可用入口,涵盖最新官网地址、网页版登录页面及防走失访问方式说明,帮助用户快速找到batoto漫画官方平台,稳定在线阅读各类漫画内容。

    127

    2026.02.25

    Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法
    Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法

    本专题系统整理Steam官网最新可用入口,涵盖网页版登录地址、新用户注册流程、账号登录方法及官方游戏商店访问说明,帮助新手玩家快速进入Steam平台,完成注册登录并管理个人游戏库。

    18

    2026.02.25

    TypeScript全栈项目架构与接口规范设计
    TypeScript全栈项目架构与接口规范设计

    本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

    15

    2026.02.25

    Python数据处理流水线与ETL工程实战
    Python数据处理流水线与ETL工程实战

    本专题聚焦 Python 在数据工程场景下的实际应用,系统讲解 ETL 流程设计、数据抽取与清洗、批处理与增量处理方案,以及数据质量校验与异常处理机制。通过构建完整的数据处理流水线案例,帮助开发者掌握数据工程中的性能优化思路与工程化规范,为后续数据分析与机器学习提供稳定可靠的数据基础。

    1

    2026.02.25

    Java领域驱动设计(DDD)与复杂业务建模实战
    Java领域驱动设计(DDD)与复杂业务建模实战

    本专题围绕 Java 在复杂业务系统中的建模与架构设计展开,深入讲解领域驱动设计(DDD)的核心思想与落地实践。内容涵盖领域划分、聚合根设计、限界上下文、领域事件、贫血模型与充血模型对比,并结合实际业务案例,讲解如何在 Spring 体系中实现可演进的领域模型架构,帮助开发者应对复杂业务带来的系统演化挑战。

    1

    2026.02.25

    Golang 生态工具与框架:扩展开发能力
    Golang 生态工具与框架:扩展开发能力

    《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路,涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式,帮助开发者构建高效、可维护的 Go 工程体系,并提升团队协作与交付效率。

    18

    2026.02.24

    Golang 性能优化专题:提升应用效率
    Golang 性能优化专题:提升应用效率

    《Golang 性能优化专题》聚焦 Go 应用在高并发与大规模服务中的性能问题,从 profiling、内存分配、Goroutine 调度、GC 机制到 I/O 与锁竞争逐层分析。结合真实案例讲解定位瓶颈的方法与优化策略,帮助开发者建立系统化性能调优思维,在保证代码可维护性的同时显著提升服务吞吐与稳定性。

    9

    2026.02.24

    Golang 面试题精选:高频问题与解答
    Golang 面试题精选:高频问题与解答

    Golang 面试题精选》系统整理企业常见 Go 技术面试问题,覆盖语言基础、并发模型、内存与调度机制、网络编程、工程实践与性能优化等核心知识点。每道题不仅给出答案,还拆解背后的设计原理与考察思路,帮助读者建立完整知识结构,在面试与实际开发中都能更从容应对复杂问题。

    6

    2026.02.24

    Golang 运行与部署实战:从本地到云端
    Golang 运行与部署实战:从本地到云端

    《Golang 运行与部署实战》围绕 Go 应用从开发完成到稳定上线的完整流程展开,系统讲解编译构建、环境配置、日志与配置管理、容器化部署以及常见运维问题处理。结合真实项目场景,拆解自动化构建与持续部署思路,帮助开发者建立可靠的发布流程,提升服务稳定性与可维护性。

    5

    2026.02.24

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

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