如何使图像切换2 div可见性？

-4

我尝试做一个div交换器类型的事情，因此生病尝试，并形容它为你...如何使图像切换2 div可见性？

因此，这里的元素一个图像按钮（开关按钮）
一个div，让我们把它叫做格设置一个和另一个div格B（这是默认隐藏）

这里是一个可视化表示

[Button image] This Is Div A

当按钮被点击我想DIV A的知名度去“隐藏”和它的显示器是“无”
而格B的可见性设置为“可见”，所以后来几乎我与格B更换DIV一个

[Button image] This Is Div B

然后再次单击切换图像时，我希望它换回来
（ Div B的可视性设置为“隐藏”，显示设置为“无”，而Div A的可见性设置为“可见”），那么我希望它继续保持这种状态，以便它不断变化。顺便说一句，所有这一切是在一个固定的股利，所以这将留在页面的顶部。

我想这是基于对这个问题的答案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();

任何帮助将是伟大的，由于某种原因，我不能缩进代码，所以它有像我一样的灰色背景视觉表现。

来源

2014-09-27 Kye Gregory

* btw“|”代表“<" & ">”* - 通过缩进4个空格，您始终可以在代码块中包装原始HTML代码... – Terry 2014-09-27 12:39:31

格式化您的代码:) – 2014-09-27 12:57:55

我没有缩进4个空格，并且它不工作。 – 2014-09-27 20:56:25

如果您试图在每次点击图像X时交换A和B的可见性，如果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"); 
      } 
     }); 
    } 
});

来源

2014-09-27 12:38:53 Keith

感谢它的工作，但一个小问题，我可以得到它切换显示，以及从“无”到“阻止”反光镜相反，所以它看起来像它只使用屏幕上的一条线 – 2014-09-27 21:06:25

这里是最后的东西我想创建减去我之前说的轻微问题 [链接] http://jsfiddle.net/4zKNJ/16/ – 2014-09-27 21:22:34

“知名度：隐藏”保持页面上的两个div位置。它使它们不可见，但在页面上为它们保留一个空的空间。如果您希望div A和div B占据页面上的相同空间，则不需要设置可见性。你只需要设置display none/block，这是jquery .toggle（）函数的作用。所以就使用它。 – Keith 2014-09-28 12:26:57

看看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 
    }); 
});

来源

2014-09-27 12:48:46 dan

如何使图像切换2 div可见性？

回答

相关问题