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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
微信小程序实现日历签到
Sep 21 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
Views rows style模板重写代码
2011/05/16 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php curl常用的5个经典例子
2017/01/20 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
python实现自动登录
2018/09/17 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
django admin 添加自定义链接方式
2020/03/11 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
体育教育毕业生自荐信
2013/11/21 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
实习科室评语
2015/01/04 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL