如何创建切换按钮以在面板之间切换
How to create a toggle button to switch between panels
在我的应用程序中,我有2个切换按钮和3个面板按钮1在面板1和面板2之间切换。按钮2在面板1和3之间切换。通过将display: none;
属性赋予div面板,我可以使它在某种程度上发挥作用。但一旦它只为每个按钮工作一次,然后它将所有子div都设置为display: none;
请看一下样品:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
div.mainSection > .panel3 > p{
margin-top:80px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">
<div>panel1</div>
<div>panel1</div>
</div>
<div class="panel2" style="display: none;">
<div>panel2</div>
</div>
<div class="panel3" style="display: none;">
<p>Panel3</p>
<div>panel3</div>
<div>panel3</div>
</div>
</div>
<div class="dashboard">
<button class="panel2">button1</button>
<button class="panel3">button2</button>
</div>
</div>
正如您所看到的,每个面板都有一些内部div。第一次,它显示了所有内部div。但一旦在面板之间切换,它就不会显示内部div。我试图只删除面板div,但似乎它对该面板中的每个div都这样做了。
那么,有什么想法可以让它继续工作,这样在面板之间切换就不会影响内部div吗?
您需要以这种方式更改您的javascript:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
问题出在选择器$('.mainSection div:visible');
中。这也选择了子div,当您尝试显示正确的面板时,子div将被隐藏。如果使用$('.mainSection > div:visible');
,则只能得到直接的子div。
相关文章:
- 使用javascript单击同一按钮,在两种样式之间更改css值
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- jQuery - 在按钮之间切换
- 如何在面板中添加在两种类型的谷歌图表之间切换的按钮
- 调用焦点时,按钮和跨度之间的区别是什么
- 我如何向这个脚本添加一个点击按钮循环URL函数(按给定顺序在URL之间切换),或者这可能吗
- JQuery ajax在2个按钮之间切换's类具有2次单击事件,但无法更改按钮的值
- 在按钮之间添加隐藏空间
- 如何使用复选框在同一按钮上的链接之间切换
- .click() 和实际单击按钮之间的区别?(javascript/jQuery)
- 在两个文件之间共享按钮变量
- 单击按钮时在角度过滤器之间切换
- click.funcion 和 bootstraps 的轮播按钮之间的冲突
- 单击按钮时,将光标放在文本区域中的 2 点之间
- 仅在按 Tab 按钮时在两个文本区域之间切换
- 创建一个在红色和绿色之间切换的按钮
- 使用 jQuery 在两个按钮之间切换
- 如何使用javascript记录两次按钮按下之间的响应时间(以秒为单位)
- JavaScript表单提交和包含提交按钮的表单之间的区别
- 如何创建切换按钮以在面板之间切换