如何打开一个窗口和关闭另一个窗口时，一个按钮按下javascript

How to open a window and close another window when a button is pressed with javascript?

本文关键字：一个 窗口 按钮 javascript 何打开 另一个      更新时间：2023-09-26

我现在很为难!在下面提供的演示中，您将注意到，当您单击黑色按钮时，会出现一个带有另一个按钮的窗口。我想要实现的是，当你点击浅灰色按钮，它会关闭整个窗口从黑色按钮，并打开一个全新的窗口!下面我将有一些代码和一个演示!

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 

#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 

$(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');
});

演示

JSFIDDLE演示

这是你要找的吗?http://jsfiddle.net/4Lbhk/4/

我在显示另一个页面之前添加了一个超时:

setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
}, 300);

我不确定你的问题，但如果你想从内部灰色div关闭窗口，你可以这样做:

$("#chooseStateAlabama").click(function(){
    $('.regionsContent').removeClass('show');
});

如果你想在整个页面中打开另一页，像这样?

$("#chooseStateAlabama").click(function(){
    window.open("http://stackoverflow.com/","_self","");
});
相关文章：