如何使圖像切換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可見性？

回答

相關問題