如何用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

回答

相关问题