开发者

Div button to toggle divs - Javascript/CSS

开发者 https://www.devze.com 2023-02-18 05:38 出处:网络
I\'m trying to add a \"back button\" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of th

I'm trying to add a "back button" which will toggle the current div to the previous div. Basically, I have a div of an Oklahoma map which fills the window. When the user clicks a certain area of the map, the div is toggled with a div that is the image of the "zoomed-in" area which they selected. I want my back button to appear on top of this zoomed-in div, in the bottom right corner, and if the user clicks the button, the div will be toggled with the original Oklahoma map div.

Here's the code I've tried so far:

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>

The button appears correctly, but it isn't functioning. I'm sure it has to do with onClick="#container.toggle();" but I don't know how to do it co开发者_C百科rrectly.

Just for background information, the container is the original Oklahoma map and it is toggled off in my JS code ($("#container").toggle();) when I switch to a zoomed-in div.

EDIT: Ok, so I do have Jquery and I tried making a click event like my other toggle events:

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

--> I removed the onClick part in the div. The button will toggle off when I click it, but the container div (Oklahoma map) is not toggling back on.


As you are using jQuery (evident in your code)

Put this in your javascript:

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

remove the onClick="#container.toggle();" from the markup


You want your onClick method to call a valid function such as abcMethod(). (Wherever your toggle code lives).

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号