javascript - 用于切换 div 的 Div 按钮 - Javascript/CSS

Question

我正在尝试添加一个“后退按钮”，它将当前 div 切换到上一个 div。基本上，我有一个填满窗口的俄克拉荷马州 map 的 div。当用户单击 map 的某个区域时，div 将切换为他们选择的“放大”区域图像的 div。我希望我的后退按钮出现在这个放大的 div 的顶部，在右下角，如果用户单击该按钮，该 div 将与原始俄克拉荷马州 map div 切换。

这是我到目前为止尝试过的代码:

CSS:

#backButton
{
    position:absolute;
    bottom:50px;
    right:50px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    height:50px;
    width:50px;
}
.button
{
    position:absolute;
    bottom:100px;
    right:100px;
    background:url('images/backspace.png');
    background-repeat:no-repeat;
    z-index:2;
    cursor:pointer;
}

HTML:

<div id="backButton" style="display:none; background:url('images/backspace.png');" onClick="#container.toggle();">
    <div class="button"></div>
</div>

---

按钮显示正确，但无法正常工作。我确定它与 onClick="#container.toggle();" 有关，但我不知道如何正确执行。

仅作为背景信息，容器 是俄克拉荷马州的原始 map ，它在我的 JS 代码中被关闭 ($("#container").toggle();) 当我切换到放大的 div 时。

编辑: 好吧，我确实有 Jquery，我尝试制作一个点击事件，就像我的其他切换事件一样:

 $("#backButton").click(function(e)
{
    $("#container").toggle();
            $("#backButton").toggle();
});

--> 我删除了 div 中的 onClick 部分。当我单击该按钮时，该按钮将关闭，但容器 div(俄克拉荷马州 map )不会重新打开。

Answer 1

因为您正在使用 jQuery(在您的代码中很明显)

将其放入您的 javascript 中:

$("#button").click(function(){
  $("#backButton").toggle();// hide the div (assume you have it turned on somewhere
  $("#container").toggle();) // show the other div
});

从标记中删除 onClick="#container.toggle();"