单击时隐藏按钮
Hide buttons on click
我有一个JS函数,当你点击一个按钮时,它会显示一个弹出的div并隐藏按钮,当你关闭弹出的div时,按钮会再次可见。
在我的例子中,我有3个按钮,现在我想要的是当它各自的弹出div可见时隐藏所有按钮,当你关闭它时,所有按钮都会再次可见。
谢谢!
更新
我实际上需要3个以上的按钮
FIDDLE演示
JS函数
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
如果你只需要这3个按钮,就这样做吧:
function show(targets) {
var len = targets.length,
i = 0;
for (i = 0; i < len; i += 1) {
document.getElementById(targets[i]).style.display = 'block';
}
}
function hide(targets) {
var len = targets.length,
i = 0;
for (i = 0; i < len; i += 1) {
document.getElementById(targets[i]).style.display = 'none';
}
}
body {
background:#fff;
padding:0;
margin:0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight:400;
font-style:normal;
line-height:1.2;
position:relative;
cursor:default;
-moz-font-smoothing:antialiased;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}
a {
color:#fff;
text-decoration:none;
}
h1 {
color:#fff;
}
#wrapper, #wrapper2, #wrapper3 {
width: 100%;
overflow: hidden;
left: 100px;
top: 100px;
position: absolute;
z-index: 200;
display:none;
}
#wrapper2 {
top: 300px;
}
#wrapper3 {
top: 300px;
}
#container {
margin-left: auto;
margin-right: auto;
}
#content, #content2, #content3 {
width: 70%;
padding: 20px;
background: #0076FC;
}
#content2 {
background: #D8266A;
}
#content3 {
background: #E88B10;
}
#button1 a, #button2 a, #button3 a {
background: #0076FC;
padding: 10px;
line-height: 30px;
overflow: hidden;
display: inline-block;
}
#button2 a {
background: #D8266A;
}
#button3 a {
background: #E88B10;
}
<div id="button1" > <a href="#" onclick="show(['wrapper']);hide(['button1','button2','button3'])">Button 1</a> </div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide(['wrapper']);show(['button1','button2','button3'])">Close</a> </div>
</div>
</div>
<div id="button2" > <a href="#" onclick="show(['wrapper2']);hide(['button1','button2','button3'])">Button 2</a> </div>
<div id="wrapper2">
<div id="container">
<div id="content2">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide(['wrapper2']);show(['button1','button2','button3'])">Close</a> </div>
</div>
</div>
<div id="button3"> <a href="#" onclick="show(['wrapper3']);hide(['button1','button2','button3'])">Button 3</a> </div>
<div id="wrapper3">
<div id="container">
<div id="content3">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide(['wrapper3']);show(['button1','button2','button3'])">Close</a> </div>
</div>
如果你需要更多,我建议你使用JQuery和类:
function show(targets) {
$(targets).css("display","block");
}
function hide(targets) {
$(targets).css("display","none");
}
body {
background:#fff;
padding:0;
margin:0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight:400;
font-style:normal;
line-height:1.2;
position:relative;
cursor:default;
-moz-font-smoothing:antialiased;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}
a {
color:#fff;
text-decoration:none;
}
h1 {
color:#fff;
}
#wrapper, #wrapper2, #wrapper3 {
width: 100%;
overflow: hidden;
left: 100px;
top: 100px;
position: absolute;
z-index: 200;
display:none;
}
#wrapper2 {
top: 300px;
}
#wrapper3 {
top: 300px;
}
#container {
margin-left: auto;
margin-right: auto;
}
#content, #content2, #content3 {
width: 70%;
padding: 20px;
background: #0076FC;
}
#content2 {
background: #D8266A;
}
#content3 {
background: #E88B10;
}
#button1 a, #button2 a, #button3 a {
background: #0076FC;
padding: 10px;
line-height: 30px;
overflow: hidden;
display: inline-block;
}
#button2 a {
background: #D8266A;
}
#button3 a {
background: #E88B10;
}
<div id="button1" class="button" > <a href="#" onclick="show('#wrapper');hide('.button')">Button 1</a> </div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide('#wrapper');show('.button')">Close</a> </div>
</div>
</div>
<div id="button2" class="button" > <a href="#" onclick="show('#wrapper2');hide('.button')">Button 2</a> </div>
<div id="wrapper2">
<div id="container">
<div id="content2">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide('#wrapper2');show('.button')">Close</a> </div>
</div>
</div>
<div id="button3" class="button" > <a href="#" onclick="show('#wrapper3');hide('.button')">Button 3</a> </div>
<div id="wrapper3">
<div id="container">
<div id="content3">
<h1>Here's The Popup!</h1>
<a href="#" onclick="hide('#wrapper3');show('.button')">Close</a> </div>
</div>
相关文章:
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 使用提交按钮隐藏未选中的单选按钮
- 使文本在它之后再次可见'It’s被一个按钮隐藏了
- 使javascript按钮隐藏或显示内容切换
- JavaScript - 输入按钮隐藏 - 不起作用
- JQuery/Javascript显示使用一个按钮隐藏多个内容
- 根据单选按钮隐藏标签的函数
- 如何使按钮隐藏在大量元素上
- 使用“显示更多”按钮隐藏列表项
- 如何使用单选按钮隐藏表 在 HTML 中使用 Java 脚本
- 单选按钮隐藏/显示所有内容
- 在特定视图的情况下将按钮隐藏在部分
- JavaScript代码,当在HTML中单击一个按钮时,两个按钮隐藏
- 单击外部以使用按钮隐藏容器
- 如何使单选按钮隐藏,直到在下拉列表中选择一个选项
- 不使用关闭按钮隐藏模式窗口
- 如何在angularjs中隐藏单击的按钮1和显示按钮2以及单击按钮2隐藏按钮2和显示按钮1
- 为什么“;使用facebook登录“;按钮隐藏在spotify Auth示例中
- jQuery使用单选按钮隐藏显示一些信息
- Jqplot按钮隐藏/启用标签