Как сделать изображение переключением видимости 2 divs?

Question

им пытаются сделать DIV типа Swapper вещь и так плохо попробовать и описать это для вас ...

Так вот элементы Кнопка изображения (кнопка переключения)
DIV, позволяет назвать его Div и другой DIV, DIV B (это по умолчанию скрыты)

Вот визуальное представление

[Button image] This Is Div A 

при нажатии кнопки я хочу, видимость Div A, чтобы пойти «скрытый» и его отображение в be "none"
, а видимость Дивой B устанавливает на «видимый», так тогда в значительной степени я заменить Див а, с сНом Ь

[Button image] This Is Div B 

тогда, когда тумблер изображение щелкнуло еще раз я хочу, чтобы поменять обратно
(Видимость Div B установлена ​​на «скрытый», а на дисплее установлено значение «none», в то время как видимость Div A устанавливается на «visable»), тогда я хочу, чтобы она продолжала идти так, чтобы она продолжала меняться. btw все это находится в div, который фиксируется, поэтому он останется в верхней части страницы.

Я попробовал следующее который был основан на ответ на этот вопрос Make an onClick event do something different every other click?

мои попытки был:

Html

<img id="x" src="img/link here"> 
<div id="a">This Is Div A </div> 
<div id="b" style="visibility: hidden;"> This Is Div B </div> 

Css

function bindImageClick(){ 
    $("#x").unbind("click"); 
    $("#x").bind("click", function (event) { 
     document.getElementById("b").style.visibility = "visible"; 
     document.getElementById("a").style.visibility = "hidden"; 
     document.getElementById("a").style.display= "none"; 
     $(this).unbind("click"); 
     $(this).bind("click", function(){ 
     document.getElementById("a").style.visibility = "visible"; 
     document.getElementById("b").style.visibility = "hidden"; 
     document.getElementById("b").style.display= "none"; 
      bindImageClick(); 
     }); 
    }); 
} 
bindImageClick(); 

Любая помощь будет отлично, и по какой-то причине я не мог отступать от кода, чтобы у него был серый фон, как я визуальные представления.

Answer 1

Если вы пытаетесь поменять видимость A и B каждый раз, когда нажимается изображение X, то должно выполняться что-то вроде следующего: если A по умолчанию видимо, а B по умолчанию скрыто (поскольку вы уже, кажется, используете jquery):

$("#x").on("click", function(){ 
    $("#a, #b").toggle(); 
}); 

И если вы должны иметь видимость скрытые (JQuery переключения использует: дисплей), вы можете написать свою собственную функцию переключения:

$(document).ready(function(){ 
    $("#x").on("click", function(){ 
     myToggle($("#a, #b")); 
    }); 

    function myToggle(divsToToggle) 
    { 
     divsToToggle.each(function(){ 
      if($(this).css("visibility") === "hidden") 
      { 
       $(this).css("visibility", "visible");    
      } 
      else 
      { 
       $(this).css("visibility", "hidden"); 
      } 
     }); 
    } 
}); 

Answer 2

взглянуть на Jquery .toggle(), это свопирует видимость выбранных элементов. Ваше объяснение было не очень ясным, но это концепция.

<button id="btn1"></button> 
<div id="a"></div> 

<button id="btn2"></button> 
<div id="b"></div> 

$(document).ready(function(){ 
    $("#b").hide(); //hide image B by default 
    $("#btn1, #btn2").click(function(){ 
     $("#a, #b").toggle(); //toggle visibility of both images 
    }); 
});