Javascript 如何使图像切换到2个div的可见性？

我想做一个div-swapper类型的东西，所以我会试着给你描述一下

这里是元素 图像按钮是切换按钮 一个div，我们称之为div a 另一个div，div B默认情况下是隐藏的

这是一个视觉表现

[Button image] This Is Div A

单击按钮时，我希望div A的可见性变为隐藏，其显示为无 当div B的可见性设置为visible时，我将用div B替换div a

[Button image] This Is Div B

然后，当切换图像再次单击时，我希望它再次切换回 B区的可视性设置为隐藏，显示设置为无，而A区的可视性设置为可视，然后我希望它继续这样运行，这样它就会不断变化。顺便说一句，所有这些都在一个固定的div中，因此它将保持在页面顶部

我尝试了以下基于对这个问题的回答

我的尝试是：

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>

---

任何帮助都会很好，由于某些原因，我无法缩进代码，使其具有像我一样的灰色背景视觉表示。

如果您试图在每次单击图像X时交换A和B的可见性，如果A在默认情况下是可见的，而B在默认情况下是隐藏的，因为您似乎已经在使用jquery，那么以下类似的方法应该可以工作：

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

如果必须具有可见性隐藏jquery toggle uses:display，则可以编写自己的切换函数：

$(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");   
            }
        });
    }
});

---

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

---

顺便说一句| represente-您可以通过缩进4个空格将原始HTML代码包装在代码块中…我缩进了4个空格，但它不起作用。谢谢，它起作用了，但有一个小问题，我可以让它切换显示以及从无到阻止维卡反之亦然，所以它看起来只使用了屏幕上的一行这里有一些东西，最后我想创建减去我之前说的小问题[链接]可见性：隐藏保持两个div在页面上的位置。它使它们不可见，但在页面上为它们保留一个空白。如果希望div A和div B在页面上占据相同的空间，则不需要设置可见性。您只需要设置display none/block，这就是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
    });
});