JS小练习之实现点击显示／隐藏

最新推荐文章于 2024-06-28 22:39:15 发布
原创 最新推荐文章于 2024-06-28 22:39:15 发布 · 3.1k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。


这段代码实现的是：点击一个按钮显示一段文字，然后再点击一次，文字消失；这个可以联想到一些网站导航栏里，点击一个按钮出现一个下拉框，里面有很多链接那种效果

这里主要需要注意的一点是：

在用JS改变HTML页面中的一些样式时，html里的代码怎么写，js里面的代码就怎么写

但是有一个例外，那就是，如果你想用JS动态的为HTML页面的某个元素增加一个class类，你需要这样写：


而不是：obj.class="add"; 这是因为class是一个关键字，所以需要用className来代替它

这里还讲一个知识点就是，很多时候我们这样来写一个暂时没有链接地址的链接；

其实也可以这样来写：

更多的是：

这样做相对于第一种写法的好处是：点击这个链接之后页面不会跑走，还是在原来的页面

JavaScript 点击按钮实现隐藏显示切换效果 - JavaScript 技巧
CsCufft的博客
09-24 939
在上面的示例中，我们创建了一个按钮（id 为 “toggleButton”）和一个 div 元素（id 为 “content”），用于包裹要隐藏或显示的内容。如果内容元素当前显示，我们将其隐藏，并更新按钮的文本为 “切换显示”。在本文中，我将向您展示如何使用 JavaScript 创建一个按钮，以实现隐藏和显示元素的切换效果。在 “script.js” 文件中，我们将使用事件监听器来监听按钮的点击事件，并在每次点击时切换 div 元素的显示状态。在上面的代码中，我们首先获取了按钮和内容元素的引用。
javascript实现点击后变换按钮显示文字的方法
10-24
主要介绍了javascript实现点击后变换按钮显示文字的方法,可实现显示一些按钮如果点击了,按钮文本变为“点了”,其他按钮文本变为“没点”的效果,非常具有实用价值,需要的朋友可以参考下
JavaScript：实现内容显示隐藏（展开收起）功能
最新发布
ChinaDragon10的博客
06-28 1011
JavaScript实现显示隐藏功能，使用JavaScript给ul标签动态添加li标签
CSS学习笔记（十一）透明悬停效果，CSS 导航栏
qq_43625134的博客
05-21 1974
透明悬停效果 opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度： 实例 img { opacity: 0.5; } img:hover { opacity: 1.0; } 例子解释 第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。 当鼠标指针离开图像时，图像将再次透明。 反向悬停效果的例子： 实例
js点击按钮div显示隐藏
u010234868的专栏
06-12 8053
<input type="button" value="隐藏" id="btn"> <div id="box"></div> #box { width: 200px; height: 200px; background-color: red; } .show { display: block; } .hidden { display: none; } // 获取元素 var btn = document.getElementById('btn'); var
JavaScript控制元素（标签）的显示与隐藏
热门推荐
cnds123的专栏
12-24 2万+
JavaScript控制元素（标签）的显示与隐藏，有多种方式实现。
微信小程序练习demo：点击展开与点击关闭
03-15
这个"微信小程序练习demo：点击展开与点击关闭"的主题，涉及到的是微信小程序中的交互设计，特别是用户界面（UI）元素的动态效果管理。 在微信小程序中，点击事件是用户交互的核心部分。"点击展开"和"点击关闭"通常...
js 小项目练习，jQuery 小例子
04-10
通过监听用户的鼠标事件，如hover（悬停）和click（点击），可以控制菜单的显示和隐藏，实现交互式的导航体验。 2. **星级评分**：星级评分系统是用户评价或反馈常见的一种形式。jQuery可以通过改变星星图标的状态...
微信小程序demo：组件练习！实现大量基础功能
05-04
每个小程序页面都有自己的生命周期，包括加载、显示、隐藏和卸载等阶段。开发者需要了解并合理利用这些生命周期方法，如`onLoad`（页面加载）、`onShow`（页面显示）和`onUnload`（页面卸载）等，以便在合适的时间...
js小练习----分时提醒问候、表单密码显示隐藏效果、文本框焦点事件、关闭广告
鹿蹊zz的博客
06-29 332
目录1.分时提醒问候2.表单密码显示隐藏效果3.文本框焦点事件4.关闭广告 根据系统不同时间来判断，所以需要用到日期内置对象 上午打开页面就说：上午好，尊敬的用户！ 0-12 下午打开页面就说：下午好，尊敬的用户！12-18 晚上打开页面就说：晚上好，尊敬的用户！ 大于18 需要一个div元素，显示不同问候语，修改元素内容即可 效果：css部分 效果： 文本框点击时，里面的默认文字隐藏，鼠标离开文本时显示文字
JS 隐藏同级的元素后只显示JS文件
08-12
标题“JS隐藏同级的元素后只显示JS文件”指的是使用JavaScript编程语言来实现一个功能，即在HTML文档中，当用户操作时（比如点击某个按钮），隐藏同一层级的所有元素，然后只显示与该操作相关的JavaScript文件内容。...
js 下拉菜单点击旁边收起实现(踩坑记)
10-16
主要介绍了js 下拉菜单点击旁边收起实现(踩坑记)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript:单击按钮显示/隐藏文本框
人在旅途
07-29 9993
     var   isshow=true;                                          function   hidslt()   {         if   (   document.all.slt.style.display!="none")         {         document.all.slt.style.display="none
JS点击显示隐藏内容
12-04 1014
JS点击显示隐藏密码 思路：获取元素，判断点击，如果DIV显示就隐藏，如果DIV隐藏就显示出来。 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 else{ 5 div.style.display='block'; 6 } 代码： style: 1 &lt...
js点击显示隐藏
林中明月间丶
01-25 476
>   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=gb2312">   title>displaytitle>       script type="text/javascript">            function hidetext()             {  
JavaScript 显示/隐藏文本框内容
qq_49900295的博客
03-04 3934
案例要求： 当鼠标单击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示 默认状态： 单击文本框时： 可以看到里面的手机两字消失了，当我们鼠标移动到别的位置时，手机二字又会出现 案例分析： 1.首先表单需要两个新事件，获得焦点onfocus 失去焦点onblur 2.如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容 3.如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改位默认文字 示例代码： <!DOCTYPE html> <html
HTML & CSS & JavaScript - “隐藏” input type=file 按钮后面的文字
qq_29761395的博客
08-14 5718
文章目录参考 <input type="file" /> 默认的样式： 实际上，你无法单独隐藏 <input type="file" /> 元素所展现的按钮后面的文字。但是，可以通过隐藏整个元素，然后使用其他元素（简称 B）代替它出现，就可以“间接地”隐藏 <input type="file" /> 元素所展现的按钮后面的文字。当点击 B 时，调用已经隐藏的 <input type="file" /> 元素的 click() 方法，同样可以实现类似用户点击
javascript实现文字隐藏
一直在路上
12-23 656
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
JS实现点击显示与隐藏
qq_16908489的博客
02-23 1993
点击显示/隐藏 #thediv { width:200px; height:100px; line-height:100px; text-align:center; background-color:green; } function S_h(obj){ if(obj.style.display=='block'){ obj.style.display='none';
JavaScript练习项目：掌握jQuery实现实用小例子
标题“js 小项目练习，jQuery 小例子”表明了内容的重点在于通过小项目练习来掌握JavaScript（js）以及jQuery的使用方法。jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值