如何使用JavaScript隐藏/显示div
[英]How to hide/show div with javascript
问题描述
I want to achieve hide/show with div's in html but in this way. 
我想用html中的div实现隐藏/显示。
Here is my html: 这是我的html：
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css: 这是我的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;
}
I want to do that when I click button on div center to hide div right and to expand div left for the size of the div right and then move div center all the way to the right. 当我单击div center上的按钮以right隐藏div并left扩展div以达到div right的大小，然后将div center一直right移动时，我想这样做。 I want to hide/show them with horizontal animation, such as from left to right or right to left. 我想用水平动画（例如从左到右或从右到左）隐藏/显示它们。 Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about: 玩单词可能会很棘手，所以我做了一些图片，以便您实际上可以看到我在说什么：
Start phase: 开始阶段：
And end phase: 并结束阶段：
4 个解决方案
解决方案1
4 已采纳 2012-06-19 12:01:51
You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/ 您可以在这里看到有效的演示... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/ 或者您可以在此处看到其他演示来增加第一格的宽度.. http://jsfiddle.net/miqdad/3WDbz/1/
解决方案2
1 2012-06-19 13:37:51
I had almost the same question a couple of days ago and maybe it helps you too. 几天前我遇到了几乎相同的问题，也许它也对您有帮助。 this example uses a checkbox to hide the div. 本示例使用复选框隐藏div。 and make the other div 100% width. 并将另一个div的宽度设为100％。
javascript, When right div is hidden left div has to be 100% width . javascript，隐藏右div时，左div必须为100％width 。
the javascript code from the example: 示例中的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();
});
});
});
and an example: http://jsfiddle.net/mplungjan/5rdXh/ 和一个示例： http : //jsfiddle.net/mplungjan/5rdXh/
解决方案3
1 2015-04-04 02:32:02
This is one of the best ways to hide a div element using JavaScript: 这是使用JavaScript隐藏div元素的最佳方法之一：
<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>
解决方案4
0 2012-06-19 12:01:22
Implementing with JQuery is easy. 使用JQuery实施很容易。 Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/ 看一下这个JSFiddle示例： http : //jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS). （总的来说：通常我不会在这里放一个JSFiddle链接，但是这次我认为值得向OP展示整个过程的工作方式，并对其HTML和CSS进行一些调整）。
A Javascript-only solution would be much more difficult to implement. 仅使用Javascript的解决方案将很难实施。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.