Div button to toggle divs - Javascript/CSS
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).
精彩评论