使用js对div的隐藏功能的实现

最新推荐文章于 2022-03-08 16:24:24 发布
最新推荐文章于 2022-03-08 16:24:24 发布
阅读量324 收藏
点赞数
分类专栏： html bootrap js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38891150/article/details/82504560
版权
html 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
bootrap
1 篇文章 0 订阅
订阅专栏
js
1 篇文章 0 订阅
订阅专栏

使用的是bootstrap样式

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<style>
			.wenben {
				width: 500px;
				height: 250px;
				border: solid 2px #000
			}
		</style>

		<script>
			function opens(boj) {
//				alert("Hello World!");
				if(1==boj){
					document.getElementById("dis1").style.display="block";
					document.getElementById("dis2").style.display="none";
					document.getElementById("dis3").style.display="none";
				}
				else if(2==boj){
					document.getElementById("dis1").style.display="none";
					document.getElementById("dis2").style.display="block";
					document.getElementById("dis3").style.display="none";
				}
				else if(3==boj){
					document.getElementById("dis1").style.display="none";
					document.getElementById("dis2").style.display="none";
					document.getElementById("dis3").style.display="block";
				}
			}
		</script>
	</head>

	<body>
		<div class="col-md-2"></div>
		<div class="col-md-10">
			<ul class="nav nav-pills">
				<li role="presentation" class="active">
					<a href="#" onclick="opens(1)">Home</a>
				</li>
				<li role="presentation" class="active">
					<a href="#" onclick="opens(2)">Profile</a>
				</li>
				<li role="presentation" class="active">
					<a href="#" onclick="opens(3)">Messages</a>
				</li>
			</ul>
		</div>

		<!--导航栏下-->
		<div class="col-md-2"></div>
		<div class="col-md-10">
			<br />
			<!--变化文本一-->
			<div class="wenben" id="dis1">
				Hello World<br /> Home内容
			</div>
			<!--<!--变化文本二-->
			<div class="wenben" id="dis2" style="display:none">
				Hello World<br /> Profile内容
			</div>
			<!--变化文本三-->
			<div class="wenben" id="dis3" style="display:none">
				Hello World<br /> Messages内容
			</div>
		</div>

	</body>

</html>

效果图，点击哪个button，button下的div框就会显示不同的内容

要懂得舍弃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js将div隐藏或显示
S_Q_A的博客
10-07 3979
一、隐藏且不占用页面空间 // 设置display属性 style="display: none;" document.getElementById("id").style.display="none"; //隐藏 document.getElementById("id").style.display=""; //显示 二、隐藏但仍占有页面空间，会显示空白 // 设置 visibility但是隐藏后页面显示空白 style="visibility: none;" document.getEleme
JS实现各种动态显示隐藏div效果
01-10
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
JS jQuery显示隐藏div的几种方法
热门推荐
未曾远去
09-18 14万+
&lt;div id="demo"&gt;AAA&lt;/div&gt; JS隐藏和显示div的方式有两种： 方式1：隐藏后释放占用的页面空间 通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;" document.getElementById("demo").style.display="none";//隐藏 document.ge
js实现隐藏和显示div的两种通用方法
祖哥的博客
10-30 1万+
说明：这里我只是简单的写个demo，只要掌握怎么写怎么实现就ok了 第一种：jquery实现隐藏和显示div &lt;div &gt; &lt;div id="demo1"&gt;隐藏&lt;/div&gt; &lt;div id="demo2"&gt;显示&lt;/div&gt; &lt;/div&gt; &lt;script&gt; $("#d
js控制div属性隐藏方法
木子de小屋屋啦啦啦
02-22 1万+
原文详解：js控制div属性隐藏方法 原文连接：http://licocom.com/archives/884 如题：编写html时如何用js控制div的显示和隐藏。 假定页面展示内容如下：下div里面是我们要展示的东西， &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp
web前端,js实现div隐藏显示
翟浩浩Android专栏
09-28 4853
显示/隐藏             function toggle(targetid){             if (document.getElementById){                 target=document.getElementById(targetid);                 if (target.style.display=="bl
js实现DIV的一些简单控制
10-30
但是，如果我们想要对 DIV 进行更灵活的控制，例如改变其位置、大小、颜色、可见性等，就需要使用 JavaScript 来实现。本文将介绍如何使用 JavaScript 实现 DIV 的一些简单控制。 首先，让我们来了解一下 ...
javascript实现div的显示和隐藏的小例子
10-27
标题中的“javascript实现div的显示和隐藏的小例子”是指通过JavaScript来控制HTML中div元素的可见性，这是前端开发中常见的交互效果。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户与网页交互时动态更新...
JS实现div模块的截图并下载功能
10-19
在JavaScript中实现对div模块的截图并下载功能是一项常见的需求，尤其在开发交互式Web应用时。这个功能允许用户捕获网页中特定区域的图像，并能够直接保存为本地文件。以下是一个详细的步骤来实现这个功能： 首先，...
js实现div弹出层的方法
10-25
在JavaScript中，实现一个div弹出层是一项...以上就是使用JavaScript实现div弹出层的完整方法，这个实例不仅提供了基本的弹出功能，还考虑了用户体验，如拖拽和自定义显示效果，对于Web开发者来说具有很高的实用价值。
js实现非常棒的弹出div
10-21
标题所提到的"js实现非常棒的弹出div"是一种常见的网页交互设计，用于在用户触发某个事件（如点击按钮）时，弹出一个浮动的div元素，展示额外的信息或者进行交互操作。在这个实例中，我们看到一个简单的JavaScript和...
js点击实现显示和隐藏效果
luckybuling
07-12 3万+
1、html结构 &lt;img src="images/xingxing.jpg" alt="" id="img"&gt; &lt;button id="btn_show" &gt; 显示 &lt;/button&gt; &lt;button id="btn_hidden"&gt; 隐藏 &lt;/button
JS显示和隐藏div
weixin_44858732的博客
06-09 2万+
JS显示和隐藏div 接下来我们使用Visual Studio这个软件来写一个的方法，我们可以使用这种写法写一个小案例来实现一个div里面显示和隐藏的效果。 我们先看一下html的页面截图： 首先我们先在html页面上建立一个input标签然后在给他一个id，接着给他一个div设置一个宽高100像素的正方形。然后接着我们就要写一下script的js代码。 看一下js的代码截图： 我们可以看到2...
javascript实现显示和隐藏div方法汇总
三五月儿的专栏
01-14 8513
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15种方法实现div显示和隐藏</title> <script src="js/base.js"></script> <style> body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddin
JS制作显示隐藏
weixin_57762662的博客
03-08 5595
打开DW按下CTRL+N新建一个HTML文档； 首先我们在body标签里写好两个button（按钮）标签，在button标签里面分别分别写好显示与隐藏两个字，让我们更好的区分，当然我们也要给它们设好两个不同的id名，为我们写JS代码做铺垫； 3. 接下来我在button标签下面新建一个div来做我们要隐藏显示的对象，当然也别忘了也给它一个id，这里我就给它id名叫box； 4. 随后我们创建一个style，然后在里面设置div的样式属性，这里可以自己找个图片来做为隐藏显示对象，我嫌麻..
jquery实现的可隐藏重现的靠边悬浮层
weixin_34409822的博客
03-17 209
本实例使用jquery操作div的CSS，实现了可隐藏重现的靠边悬浮层，预览效果网址：http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法，详细介绍请参考网址：http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码，保存到html文件可查看效果。 ...
js控制 div显示隐藏
晓风揽月
02-05 5038
显示与隐藏 function dis(b){ document.getElementById('qq').style.display = (document.getElementById('qq').style.display=="block") ? "none" : "block"; b.value = (b.value=="显示") ? "隐藏" : "显示"; } #qq {dis
js点击隐藏和显示div
风云无忌的博客
12-24 2万+
display function hidetext() { var mychar = document.getElementById("con").style.display ="none"; } function showtext() { var mychar = document.getElementBy
JS 使用单例模式实现弹出div
最新发布
05-25
单例模式是一种常用的设计模式，它的主要目的是确保一个类只有一个实例，并提供一个全局访问点。在 JavaScript 中，可以使用单例模式来实现弹出 div 的功能。 下面是一个简单的例子： ```javascript var Popup = (function() { var instance; function createInstance() { var div = document.createElement("div"); div.innerHTML = "Hello, world!"; div.style.display = "none"; document.body.appendChild(div); return div; } return { getInstance: function() { if (!instance) { instance = createInstance(); } return instance; }, show: function() { this.getInstance().style.display = "block"; }, hide: function() { this.getInstance().style.display = "none"; } }; })(); // 使用 Popup.show(); // 显示弹出框 Popup.hide(); // 隐藏弹出框 ``` 在这个例子中，我们使用了一个立即执行函数，创建了一个私有变量 `instance`，它存储了唯一的实例。在 `createInstance` 函数中，我们创建了一个 div 元素，并将其添加到页面中。然后，我们返回这个 div 元素，作为单例的实例。 在 `getInstance` 方法中，我们首先检查实例是否已经存在。如果不存在，我们调用 `createInstance` 方法来创建实例。最后，我们返回实例。 在 `show` 和 `hide` 方法中，我们通过 `getInstance` 方法来获取实例，并设置其样式属性来显示或隐藏弹出框。 通过这种方式，我们可以确保只有一个弹出框实例存在，并且可以在任何时候访问它。同时，我们可以在需要时方便地显示或隐藏弹出框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值