Кнопка Div для переключения div - Javascript / CSS - PullRequest
Новая
       7

Кнопка Div для переключения div - Javascript / CSS

1 голос
/ 22 марта 2011

Я пытаюсь добавить «кнопку назад», которая переключит текущий div к предыдущему div.По сути, у меня есть div карты Оклахомы, которая заполняет окно.Когда пользователь щелкает определенную область карты, div переключается с div, который является изображением «увеличенной» области, которую он выбрал.Я хочу, чтобы кнопка «Назад» отображалась в верхней части этого увеличенного элемента div в нижнем правом углу, и если пользователь нажмет кнопку, элемент div будет переключаться с исходным элементом карты Оклахомы.

Воткод, который я пробовал до сих пор:

CSS: 

<code>#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();", но я не знаю, как это сделать правильно.

Только для справочной информации, контейнер - это оригинальная карта Оклахомы, и онаотключается в моем коде JS ($("#container").toggle();), когда я переключаюсь на увеличенный div.

EDIT: ОК, поэтому у меня есть Jquery, и я попытался сделать событие clickкак и мои другие события переключения: 

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

-> Я удалил часть onClick в div.Кнопка выключится, когда я нажму на нее, но контейнерный блок (карта Оклахомы) не переключается обратно.

Ответы [ 2 ]

0 голосов
/ 22 марта 2011

Как вы используете 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();" с разметки

0 голосов
/ 22 марта 2011

Вы хотите, чтобы ваш метод onClick вызывал допустимую функцию, такую ​​как abcMethod().(Где бы ни находился ваш код переключения).

...