Question

我正在尝试添加一个“后退按钮”，它将当前div切换到前一个div。基本上，我有一张俄克拉荷马州的地图填充了窗户。当用户单击地图的某个区域时，div将切换为div，该div是他们选择的“放大”区域的图像。我希望我的后退按钮显示在右下角的放大div的顶部，如果用户单击该按钮，div将与原始的Oklahoma地图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();"有关，但我不知道如何正确地做到这一点。

仅仅为了获取背景信息，容器是原始的俄克拉荷马州地图，当我切换到放大的div时，它会在我的JS代码（$("#container").toggle();）中切换。

编辑：好的，所以我确实有Jquery，我尝试像其他切换事件一样制作点击事件：

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

- ＆gt; 我删除了div中的onClick部分。单击它时按钮将关闭，但容器div（俄克拉荷马州地图）没有切换回来。

Answer 1

您希望onClick方法调用有效的函数，例如abcMethod()。（无论你的切换代码在哪里）。

Answer 2

正在使用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();"

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

2 个答案: