文档章节

HTML元素的隐藏和显示

zhaochaochao
 zhaochaochao
发布于 2016/05/27 10:08
字数 74
阅读 7
收藏 0

一、实例 隐藏:$('#saveBtn').hide(); 显示:$('#saveBtn').show(); 二、.实例

<html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>HTML元素的显示与隐藏控制</title> <script type="text/javascript"> function showAndHidden1(){ var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); if(div1.style.display=='block') div1.style.display='none'; else div1.style.display='block'; if(div2.style.display=='block') div2.style.display='none'; else div2.style.display='block'; }

function showAndHidden2(){
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
if(div3.style.visibility=='visible') div3.style.visibility='hidden';
else div3.style.visibility='visible';
if(div4.style.visibility=='visible') div4.style.visibility='hidden';
else div4.style.visibility='visible';
}
</script>

</head> <body> <div>display:元素的位置不被占用</div> <div id="div1" style="display:block;">DIV 1</div> <div id="div2" style="display:none;">DIV 2</div> <input type="button" onclick="showAndHidden1();" value="DIV切换" /> <hr> <div>visibility:元素的位置仍被占用</div> <div id="div3" style="visibility:visible;">DIV 3</div> <div id="div4" style="visibility:hidden;">DIV 4</div> <input type="button" onclick="showAndHidden2();" value="DIV切换" /> </body> </html>

© 著作权归作者所有

zhaochaochao
粉丝 1
博文 106
码字总数 39033
作品 0
郑州
程序员
私信 提问
jQuery动态效果学习笔记

资料来源 W3Cschool 1.元素的显示与隐藏 1.1显示元素show() 语法 $(selector).show(speed,callback); 显示已经设置隐藏的元素 1.2隐藏元素hide() 语法 $(selector).hide(speed,callback); 隐...

inw3cschool
2017/04/25
0
0
【每天一个JQuery特效】(demo6)在指定的时间内完成元素的显示或隐藏

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,语法: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏...

Rhymo-Wu
2018/07/06
22
0
javascript 控制 html元素 显示/隐藏

javascript 控制 html元素 显示/隐藏 1。编写js函数 2. 要显示/隐藏的html元素加上 id 属性

teacheryang
2012/05/03
0
0
【每天一个JQuery特效】以卷帘效果展开或收缩被选择的元素

具体效果如下图: 主要代码: 在上面的代码中,如果元素已经显示,slideUp()方法则以卷帘式的滑动效果隐藏备选元素。slideUp()语法声明如下: 其中,speed,callback都是可选参数,speed默认...

Rhymo-Wu
2018/06/19
65
0
jquery hide(),show()方法用法解析

这月做了个简单的隐藏显示效果,然后想在这里简述下 平时会用到的 hide(),show()方法 在jquery中我显示与隐藏元素可以直接使用show()和hide()来操作,这比起js中的操作要方便了,同时show()和...

anny_1987
2014/02/24
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
14分钟前
6
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
37分钟前
11
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
45分钟前
26
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
50分钟前
18
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
59分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部