点击按钮控制div隐藏和显示

要求：有一个按钮，点击按钮使得div消失，之后将按钮文字改变为显示，再次点击按钮使得div出现，依次类推。效果如下图

方法一引入vue

<html><head><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><div id="app1"><input type="button" @click="flag = !flag" :value='able()'><div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);" v-show="flag"></div></div></body><script>var app = new Vue({el: '#app1',data: {flag: true,},methods:{able(){if (this.flag){return '隐藏'}else{return '显示'}}}})</script>
</html>

方法二

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">function show(){var btnobj=document.getElementById("btn1");var divobj=document.getElementById("div1");if(btnobj.value=="隐藏"){divobj.style.display="none";btnobj.value="显示";}else{divobj.style.display="block";btnobj.value="隐藏";}}</script></head><body><input type="button" value="隐藏" onclick="show()" id="btn1"><div id="div1" style="width: 200px; height: 200px; background-color: rgb(255, 136, 0);"></div></body>
</html>

点击按钮控制div隐藏和显示相关推荐

Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
微信小程序通过点击按钮控制元素隐藏与显示
目录一.效果图: 二.代码 js: wxml: 一.效果图: 二.代码 js: Page({data:{hidden:false, }, // 隐藏yincang:function(e){setTi ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
AngularJS控制div隐藏或显示-ng-show
2019独角兽企业重金招聘Python工程师标准>>> 效果图 NgShow.html <!doctype html> <html ng-app="MyC ...
原生js设置div隐藏或者显示_JavaScript动画方式控制div元素的隐藏和显示
jQuery实现此功能相对比较简单,具体参阅点击按钮动画方式隐藏和显示div一章节. 结合CSS3实现此功能也非常便利和适合,具体参阅JavaScript与CSS3动画方式改变元素尺寸一章节. 原生J ...
原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...
原生js设置div隐藏或者显示_JS实现“隐藏与显示”功能(多种方法)
下面我将效果图展示出来: 1,通过按钮实现隐藏与显示: 这个是通过按钮点击实现的隐藏与显示,具体代码如下: 通过按钮实现隐藏和显示 .body{ margin: 0 auto; } #show{ wi ...
html动态显示隐藏div,div隐藏与显示属性怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
原生js设置div隐藏或者显示_用js控制div的显示与隐藏
功能介绍:要实现一个div的显示与隐藏,方法有很多,这里记录下一个简单的js效果,用js来控制div的显示与隐藏,示例代码如下: js显示隐藏层 function showdiv(targetid,o ...

点击按钮控制div隐藏和显示

点击按钮控制div隐藏和显示相关推荐

最新文章

热门文章