如何用javascript隱藏/顯示div

我想用html的div來實現hide/show，但以這種方式實現。如何用javascript隱藏/顯示div

這裏是我的html：

<div id="left"></div> 
<div id="middle"> 
<input type="button" id="button"/> 
</div> 
<div id="right"></div>

這是我的CSS：

body 
{ 
height: 100%; 
margin: 0; 
padding: 0 ; 
border: 0 none; 
} 
#left 
{ 
background-color:#EEEEEE; 
height:570px; 
width:73.9%; 
float:left; 
} 
#center 
{ 
background-color:#D4EAE4; 
color:#535353; 
height:570px; 
width:15.25%; 
float:left; 
margin:0; 
} 
#right 
{ 
background-color:#D4EAE4; 
float:left; 
width:11%; 
height:570px; 
margin:0; 
}

我想這樣做，當我點擊DIV按鈕center隱藏DIV right和擴大DIV left爲div right的大小，然後將div center一直移動到右側。我想用水平動畫來隱藏/顯示它們，例如從左到右或從右到左。與文字遊戲可能會非常棘手，所以我做了一個小圖片，所以你可以清楚地看到什麼我談論：

開始階段： Start phase

和結束階段： enter image description here

來源

2012-06-19 user123_456

而http://whathaveyoutried.com？ – antyrat

你可以很容易地隱藏那個調用函數的div，例如'function hideDiv（id，state）{document.getElementById（id）.style.display = state; }'。現在，在左邊div上移動以獲得剩餘空間，是不是會「寬度：100％」這樣做？ – AleksanderKseniya

@antyrat我試圖只顯示/隱藏，因爲我是新來的JavaScript，所以我只是把詳細的問題放在這裏。 –

這裏你可以看到一個工作演示... http://jsfiddle.net/miqdad/3WDbz/

，或者你可以看到其他演示其增量在這裏第一個div的寬度.. http://jsfiddle.net/miqdad/3WDbz/1/

來源

2012-06-19 12:01:51

這正是我正在尋找的 –

我剛剛創建這種類型的小提琴，感謝上帝刷新這個問題看到它完成） – khurram

一個問題，如果我有其他方式，它會怎麼樣。要啓動它作爲div'right'隱藏，然後點擊按鈕我可以顯示它？如何更改代碼？我是否也需要更改css？ –

與實現JQuery很簡單。看看這個JSFiddle的例子：http://jsfiddle.net/q39wv/2/

（對所有人：通常我不會在這裏只提供一個JSFiddle鏈接，但這次我認爲值得向OP展示整個事情是如何工作的，並對他的一些調整HTML和CSS）。

一個僅使用Javascript的解決方案會更難實現。

來源

2012-06-19 12:01:22 Cranio

我幾乎同樣的問題一個前兩天也許它也可以幫助你。本例使用複選框來隱藏div。並使其他div 100％的寬度。

javascript, When right div is hidden left div has to be 100% width。

從例子中的JavaScript代碼：

$(function() { 
    $("#foo").on("click",function() { 
     if ($(this).is(':checked')) $('#checked-a').show('fast',function() { 
      $('#checked-b').css("width","60%"); 
      $('#checked-a').css("width","40%"); 
     }) ; 
     else $('#checked-a').show('fast',function(){ 
      $('#checked-b').css("width","100%").show();   
      $('#checked-a').css("width","0%").hide(); 

     }); 
    }); 
});

和一個例子： http://jsfiddle.net/mplungjan/5rdXh/

來源

2012-06-19 13:37:51

這是使用隱藏一個div元素的最佳途徑之一的JavaScript：

<html> 
<head> 
    <script> 
     function hideDiv() { 
     document.getElementById("myP2").style.visibility = "hidden"; 
     } 
    </script> 
</head> 
<body> 
    <button onClick="hideDiv()">Hide</button> 
    <br> 
    <br> 
    <p id="myP2">Hello world!</p> 
</body> 
</html>

來源

2015-04-04 02:32:02

如何用javascript隱藏/顯示div

回答

相關問題