JS实现“隐藏与显示”功能(多种方法)


Posted in Javascript onNovember 24, 2016

下面我将效果图展示出来:

1,通过按钮实现隐藏与显示:

JS实现“隐藏与显示”功能(多种方法)

这个是通过按钮点击实现的隐藏与显示,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过按钮实现隐藏和显示</title>
<style type="text/css">
.body{
margin: 0 auto;
}
#show{
width: 600px;
height: auto;
font-size: 14px;
background-color: #E4C392;
display: block;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
}
#show h2{
color: #11C2EE;
margin: 0 auto;
}
.slide{
margin: 0 auto;
padding: 0;
width: 600px;
border-top: solid 4px #D6A55C;
}
.btn-slide{
background-color: bisque;
width: 80px;
height:30px;
text-align: center;
margin: 0 auto;
border-radius: 8px;
margin: 0 auto;
display: block;
}
</style>
<script type="text/javascript">
function divShow(){
document.getElementById("btnshow").style.display="block";
document.getElementById("btnhref").innerHTML ="关闭";
document.getElementById("btnhref").href ="javascript:divhidden()";
}
function divhidden(){
document.getElementById("btnshow").style.display="none";
document.getElementById("btnhref").innerHTML ="了解";
document.getElementById("btnhref").href ="javascript:divShow()"; 
}
</script>
</head>
<body>
<div id="show">
<h2>通过点击按钮实现隐藏和显示</h2>
<hr />
<p>
欢迎来到我的博客Jaxzm!
</p>
<p>
目前我在学习GoF的设计模式,你想了解么?想要了解的话,请点击按钮。
</p>
<div id="btnshow" style="display: none;">
<p>
GoF所描述的23种设计模式,总共可以分为三种类型:创建型模式,行为型模式,结构型模式。
</p>
<p>
我觉得比较难的是创建型模式,因为它说的比较抽象,所以我不容易理解它,然后我编码也比较少,所以就不太容易理解这个。
</p>
</div>
</div>
<p class="slide">
<a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a>
</p>
</body>
</html>

其中,主要能够实现这个功能的是js代码,

JS实现“隐藏与显示”功能(多种方法)

通过getElementById()这个方法找到对应元素,进而控制它的style,以此来做对应的功能。这是一个比较简单的方法。

接下来演示的是另外一种方式:

这个是通过具体的时间限制来控制其隐藏与显示,

JS实现“隐藏与显示”功能(多种方法)

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过定时实现隐藏和显示</title>
<style type="text/css">
.body{
margin: 0 auto;
padding: 0;
background-color: #D6A55C;
}
#show{
background-color: #E4C392;
width: 700px;
height: 100px;
display: block;
margin: 0 auto;
padding: 10px;
font-size: 14px;
height: auto; 
text-align: center; 
}
#show h2{
color: #3CC4A9;
}
.hid{
background: #E8E8E8;
text-align: center;
width: 700px;
height: 100px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
text-decoration: none;
}
</style>
<script type="text/javascript">
var h = 0;
function addH(){
if(h < 400){
h=h+5;
document.getElementById("show").style.height = h+"px";
}
else{
return;
}
setTimeout("addH()",30);
}
window.onload = function showAds(){
addH();
setTimeout("subH()",5000);
}
function subH(){
if(h >0){
h -= 5;
document.getElementById("show").style.height = h+"px";
}
else{
document.getElementById("show").style.display = "none";
return;
}
setTimeout("subH()",30);
}
</script>
</head>
<body>
<div id="show">
<h2>Jaxzm欢迎您的访问</h2>
<span>此茶虽未饮,未闻,我心自生香.</span>
</div> 
<div class="hid">
<h1>Jaxzm欢迎您的访问</h1>
</div>
</div>
</body>
</html>

注意在这个js里面的setTimeout()函数,setTimeout(function,time).更加精准地用法:

执行一段代码:

var i=0;
setTimeout("i+=1;alert(i)",1000);

执行一个函数:

var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

还有一种方式就是通过jQuery方法来实现,通过切换实现隐藏与显示;效果如下:

JS实现“隐藏与显示”功能(多种方法)

看到它的样子,是否会觉得和第一个很像,但是也会发现它和第一个是不一样的,具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过jQuery实现展开收缩</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.body{
margin: 0 auto;
}
#show{
width: 600px;
height: auto;
font-size: 14px;
background-color: #E4C392;
display: block;
padding: 10px;
margin: 0 auto;
border-radius: 10px;
}
#show h2{
color: #11C2EE;
margin: 0 auto;
}
.slide{
margin: 0 auto;
padding: 0;
width: 600px;
border-top: solid 4px #D6A55C;
}
.btn-slide{
background-color: bisque;
width: 80px;
height:30px;
text-align: center;
margin: 0 auto;
border-radius: 8px;
margin: 0 auto;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".btn-slide").click(function () {
$("#btnshow").slideToggle();
});
});
</script>
</head>
<body>
<div id="show">
<h2>通过jQuery代码实现隐藏和显示</h2>
<hr />
<p>
欢迎来到我的博客Jaxzm!
</p>
<p>
目前我在学习GoF的设计模式,你想了解么?想要了解的话,请点击按钮。
</p>
<div id="btnshow" style="display: none;">
<p>
GoF所描述的23种设计模式,总共可以分为三种类型:创建型模式,行为型模式,结构型模式。
</p>
<p>
我觉得比较难的是创建型模式,因为它说的比较抽象,所以我不容易理解它,然后我编码也比较少,所以就不太容易理解这个。
</p>
</div>
</div>
<p class="slide">
<a href="javascript:divShow();" id="btnhref" class="btn-slide">了解</a>
</p>
</body>
</html>

这段代码和第一个唯一不同的便是这个js代码:

JS实现“隐藏与显示”功能(多种方法)

这里首先要引入jQuery库,然后才能调用jquery库里面的方法slideToggle(),方法的具体实现如下:

JS实现“隐藏与显示”功能(多种方法)

当点击了按钮,它就会将显示与隐藏进行切换。

学习了以上知识之后,就可以实现博客的页面显示。但是这里还需要了解nextSibling和previousSiling这两个属性。

nextSibling 它是返回某一元素后面紧跟的元素。previousSibling 它是返回某一元素之前紧跟的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制动画展开</title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0;
font-size: 9pt;
line-height: 180%;
}
#pn
{
background: #f8f8f8;
height: auto;
width: 750px;
display: block;
margin: 0 auto;
padding: 5px;
}
.btn
{
width: 80px;
height: 20px;
padding: 5px 3px 5px 3px;
text-align: center;
text-decoration: none;
background: #f0f0f0;
border: 1px solid #CCC;
}
.content
{
border: 1px solid #CCC;
display: none;
padding: 5px;
}
.title
{
font-weight: bold;
color: #3030FF;
font-size:11pt;
}
.subtitle
{
color: #CCC;
}
.btm
{
text-align: right;
height: 30px;
}
</style>
<script type="text/javascript">
var time = 300;
var h = 40;
function showdiv(obj) {
//obj.parentNode.nextSibling.nextSibling.style.display = "block";
var x = obj.parentNode.nextSibling;
//包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题。
//因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。
//当上一节点或者是下一节点为文本节点时,就继续寻找,直到找到下一个元素节点。
// 其中nodeType的值主要有以下几种:
// 
// 元素节点的nodeType值为1
// 属性节点的nodeType值为2
// 文本节点的nodeType值为3
if (x.nodeType != 1) {
x = x.nextSibling;
}
x.style.display = "block";
obj.parentNode.style.display = "none";
}
function hidediv(obj) {
obj.parentNode.parentNode.style.display = "none";
var x = obj.parentNode.parentNode.previousSibling;
if (x.nodeType != 1) {
x = x.previousSibling;
}
x.style.display = "block";
}
</script>
</head>
<body>
<div id="pn">
<div>
<p class="title">
原生js实现tooltip提示框的效果</p>
<p class="subtitle">
2016年11月13日 </p>
<p>
摘要: 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇。
前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲。
比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望。
比如这个tooltip的效果展示: 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a>
</p>
<div class="content">
<p>摘要: 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇。
前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲。
比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望。
比如这个tooltip的效果展示: 这个便是tooltip提示框的效果。</p>
<p>工具提示(Tooltip)插件根据需求生成内容和标记,默认情况下是把工具提示(tooltip)放在它们的触发元素后面。
您可以有以下两种方式添加工具提示(tooltip):
<p>通过 data 属性:如需添加一个工具提示(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。
锚的 title 即为工具提示(tooltip)的文本。</p>
默认情况下,插件把工具提示(tooltip)设置在顶部。 </p>
<div class="btm">
<a href="#" class="btn" onclick="hidediv(this);">收起全文</a>
</div>
</div>
<hr />
<div>
<p class="title">
原生js实现tooltip提示框的效果</p>
<p class="subtitle">
2016年11月13日 </p>
<p>
摘要: 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇。
前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲。
比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望。
比如这个tooltip的效果展示: 这个便是tooltip提示框的... <a onclick="showdiv(this);" href="#">全文</a>
</p>
<div class="content">
<p>摘要: 在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇。
前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲。
比如说我,只是随机一瞟,便看到了这个tooltip的特效,就有一种想要征服它的愿望。
比如这个tooltip的效果展示: 这个便是tooltip提示框的效果。</p>
<p>工具提示(Tooltip)插件根据需求生成内容和标记,默认情况下是把工具提示(tooltip)放在它们的触发元素后面。
您可以有以下两种方式添加工具提示(tooltip):
<p>通过 data 属性:如需添加一个工具提示(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。
锚的 title 即为工具提示(tooltip)的文本。</p>
默认情况下,插件把工具提示(tooltip)设置在顶部。 </p>
<div class="btm">
<a href="#" class="btn" onclick="hidediv(this);">收起全文</a>
</div>
</div>
</div>
</body>
</html>

效果如下:

JS实现“隐藏与显示”功能(多种方法)

其实以上方法具体实现起来都是比较简单的。实用性也比较大。

以上所述是小编给大家介绍的JS实现“隐藏与显示”功能的多种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
JS简单实现点击复制链接的方法
Aug 03 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 #Javascript
javascript简单进制转换实现方法
Nov 24 #Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 #Javascript
详解Node.js:events事件模块
Nov 24 #Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 #Javascript
微信小程序-消息提示框实例
Nov 24 #Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
Using the TextRange Object
2006/10/14 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
Python3 queue队列模块详细介绍
2018/01/05 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python图像和办公文档处理总结
2019/05/28 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python插件机制实现详解
2020/05/04 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
Python 多进程、多线程效率对比
2020/11/19 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
大学生优秀的自我评价分享
2013/10/22 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
大学辅导员述职报告
2015/01/10 职场文书
小学英语复习计划
2015/01/19 职场文书
会计简历自我评价
2015/03/10 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技