[英]How to open a window and close another window when a button is pressed with javascript?
I am in quite a bind right now! 我现在处于困境中! You will notice in the Demo provided below that when you click the black button a window appears with another button in it.
您将在下面提供的演示中注意到,当您单击黑色按钮时,将出现一个窗口,其中包含另一个按钮。 What I am trying to achieve is when you click the light gray button it will shut that whole window from the black button and open a whole new window!
我要实现的是,当您单击浅灰色按钮时,它将关闭整个窗口,而不会关闭黑色按钮,并打开一个新窗口! Below I will have some code and a demo!
下面,我将提供一些代码和一个演示!
HTML HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
<div id="regionsCanada" class="not-open regionsButton">
<div id="regionsCanadaTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateAlabama"></div>
</div>
</div>
<div id="regionsCanadaChooseProvince" class="regionsContent">CDN</div>
CSS CSS
#sidemenu {
width: 60px;
max-height: 100%;
min-height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-height: 100%;
min-width: 60px;
max-width: 60px;
max-height: 100%;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -500px;
width: 500px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#regionsCanada {
width: 60px;
height: 60px;
background-color:#666;
}
#regionsCanadaTooltip {
opacity:0;
background-color:#000000;
height:60px;
width:120px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:60px;
visibility:hidden;
}
#regionsCanada.not-open:hover #regionsCanadaTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsCanada:hover {
background-position:bottom;
}
#regionsCanadaChooseProvince{
position:absolute;
transition:all ease-in-out 0.25s;
left: -500px;
width: 500px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
}
#regionsCanadaChooseProvince.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesColumnOne {
width:150px;
height:540px;
float:left;
}
#chooseStateAlabama {
width: 150px;
height:54px;
background-color:#999999;
top:0px;
}
#chooseStateAlabama:hover {
background-color:#999888;
cursor:pointer;
}
Javascript 使用Javascript
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show').eq(buttonIndex).addClass('show');
$regionsButton.not($button).addClass('not-open');
});
DEMO DEMO
Is this what you are looking for? 这是你想要的? http://jsfiddle.net/4Lbhk/4/
http://jsfiddle.net/4Lbhk/4/
I added a timeout before showing the other page: 我在显示其他页面之前添加了超时:
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 300);
I am not sure of your question, but if you want to close the window from within the inside grey div, you could do: 我不确定您的问题,但是如果您想从内部的灰色div中关闭窗口,则可以执行以下操作:
$("#chooseStateAlabama").click(function(){
$('.regionsContent').removeClass('show');
});
If you want to open another page in the whole page, something like this? 如果要在整个页面中打开另一个页面,是这样的吗?
$("#chooseStateAlabama").click(function(){
window.open("http://stackoverflow.com/","_self","");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.