html 按钮 隐藏作用

如何编写一段web程序,要实现的作用是:一行文字后有一个按钮,按钮显示的文字为“隐藏”,点击按钮后,该按钮前的文字消失,按钮上的文字显示为“显示”,在点击按钮,文字图出现... 如何编写一段web程序,要实现的作用是:一行文字后有一个按钮,按钮显示的文字为“隐藏”,点击按钮后,该按钮前的文字消失,按钮上的文字显示为“显示”,在点击按钮,文字图出现,该按钮上的文字显示为“隐藏”。
刚刚开始自学web,学的很烂,希望大家多多帮帮,谢谢了!
一个答案中,需要两个按钮分别实现隐藏和现实的效果,如果只要一个按钮怎么样才能达到那个效果?
展开
 我来答
情谈学长
2019-09-10 · 加油,要努力成为别人眼中羡慕的自己
情谈学长
采纳数:2930 获赞数:45832

向TA提问 私信TA
展开全部

可以使用js来实现按钮和文本的显示隐藏。

1.创建一个新的html文档,在body标签中添加span标签和按钮标签,并为每个标签设置一个id:

2.添加脚本标记并向脚本标记添加按钮单击事件。如果按钮的内容为“隐藏”,则文本将被隐藏,按钮内容将转换为“显示”:

3.如果按钮内容不是“隐藏”,将显示文本,按钮内容将“隐藏”:

百度网友4970322
2019-07-15 · TA获得超过1.5万个赞
知道答主
回答量:647
采纳率:50%
帮助的人:38万
展开全部

可以用js实现按钮和文字的显示隐藏。

1、新建html文档,在body标签中添加一个span标签和button标签,并为它们分别设置一个id:

2、添加script标签,在script标签中添加按钮的点击事件,如果按钮的内容为“隐藏”,就会将文字隐藏,并且将按钮内容转为“显示”:

3、如果按钮内容不是“隐藏”,就会将文字显示出来,并且将按钮内容转为“隐藏”:

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
刺友互
高粉答主

2019-06-21 · 每个回答都超有意思的
知道答主
回答量:3979
采纳率:100%
帮助的人:72.1万
展开全部

1·、新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。

4、使用data创建一个show属性,设置默认值为true;使用metheds创建一个点击事件(showCont),该事件处理当show值为true就修改给false,当show为false就修改为true。

5、添加显示隐藏功能。在按钮标签上添加点击事件showCont,在按钮标签后的div标签上使用v-if添加show属性。

6、保存html代码,然后使用浏览器打开,点击按钮会发现按钮后面的文字隐藏了,再次点击按钮隐藏的内容又显示出来。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
飞喵某
高粉答主

2019-06-12 · 说的都是干货,快来关注
知道答主
回答量:631
采纳率:0%
帮助的人:29.5万
展开全部

1、首先打开html编辑器,新建一个html文件,在里面创建一个按钮和div,分别给它们一些样式,再给按钮绑定一个点击事件,然后给div的样式的display属性的值设置为none:

2、在下方写js代码,首先定义一个函数,里面先获取div和按钮的dom元素,然后判断div中display值是否为none,是的话将它的值改为block属性,并且将按钮的文本改变成隐藏div;否则的话则相反:

3、最后打开浏览器,可以看到一个橙色的按钮,点击一下:

4、此时div就显示出来了。以上就是html设置切换按钮隐藏的方法:

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
gcfs1986
推荐于2017-12-15 · TA获得超过5361个赞
知道答主
回答量:203
采纳率:0%
帮助的人:95.8万
展开全部
在html里给那个文字以div的方式封装赋个id值,然后写按钮的onclick事件,可以直接在onclick上写改变display,也可以用javascript的函数来写。原理相同,都是获取那个id的控件,并控制这个文本的display属性为none或者block即可

<html>
<body>
<div id= "divID" style= "display:block">
测试
</div>
<input type=button value= "显示" onclick='document.getElementById("divID").style.display="block"'>
<input type=button value= "隐藏" onclick='document.getElementById("divID").style.display="none"'>
</body>
</html>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(5)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式