html 按钮 隐藏作用
如何编写一段web程序,要实现的作用是:一行文字后有一个按钮,按钮显示的文字为“隐藏”,点击按钮后,该按钮前的文字消失,按钮上的文字显示为“显示”,在点击按钮,文字图出现...
如何编写一段web程序,要实现的作用是:一行文字后有一个按钮,按钮显示的文字为“隐藏”,点击按钮后,该按钮前的文字消失,按钮上的文字显示为“显示”,在点击按钮,文字图出现,该按钮上的文字显示为“隐藏”。
刚刚开始自学web,学的很烂,希望大家多多帮帮,谢谢了!
一个答案中,需要两个按钮分别实现隐藏和现实的效果,如果只要一个按钮怎么样才能达到那个效果? 展开
刚刚开始自学web,学的很烂,希望大家多多帮帮,谢谢了!
一个答案中,需要两个按钮分别实现隐藏和现实的效果,如果只要一个按钮怎么样才能达到那个效果? 展开
7个回答
展开全部
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代码,然后使用浏览器打开,点击按钮会发现按钮后面的文字隐藏了,再次点击按钮隐藏的内容又显示出来。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
在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>
<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>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询