关于点击button显示隐藏

#div1{

height: 200px;

width: 500px;

background: skyblue;

display: none;

}

<input type="button" name="" id="button" value="点我点我" />

<div id="div1">

</div>

<script type="text/javascript">

var contant = document.getElementById(‘div1‘);

var Button = document.getElementById(‘button‘);

// var off = true;

//获取操作的标签

Button.onclick = function(){

if(contant.style.display == ‘none‘){

contant.style.display = ‘block‘;//点击需要两次是因为刚开始没有获取到样式。写为div内部样式即可。如:<div id="div1" style="display:none;"> </div>

// off = false;

}

else{

contant.style.display = ‘none‘;

// off = true;

}

}

</script>

时间: 2024-10-12 11:58:14

关于点击button显示隐藏的相关文章

点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

按钮点击显示隐藏层(再次点击按钮则隐藏层关闭): HTML部分: <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button> <div id="hidden" style="display:none">我是隐藏层.</div> JS部分: <script type='te

JavaScript DOM案例点击按钮显示隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } </style> </head> <body> <

点击button显示文字

Button ib_01;Textview tv_01;public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.main);ib_01 = (Button)this.findViewById(R.id.这里写你按钮的ID);tv_01 = (Textview)this.findViewById(R.id.这里写你textview的

点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="text/css"> body { background-color:#999999; } #myDiv { background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <body> <input id="btn&

如果写一个点击view带动画的下滑展开显示隐藏内容的控件

原理是在onMeasure中得到隐藏内容的高度,点击这个view的时候对隐藏的view startAnimation,让它的高度从0增长到onMeasure得到的这个View的measureHeight 具体这样写: public class ExpandableLayout extends LinearLayout { private Context mContext; private LinearLayout mHandleView; private RelativeLayout mCont

js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>

React 点击按钮显示div与隐藏div,并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n

js 事件点击 显示 隐藏

1 <div style="position:absolute;left:40%;top:10%;border-style:dotted"> 2 <img src="zgl.jpg"/><br/> 3 <center> 4 <input type="button" value="隐藏"/> 5      6 <input type="button&qu

Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框

实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin