Here's a very simple jsFiddle:
function hideDiv2() {
$('.div2').hide();
}
function showDiv2() {
$('.div2').show();
}.div1 {
height: 300px;
width: 20%;
background-color: red;
float: left;
}
.div2 {
height: 300px;
width: 20%;
background-color: green;
float: left
}
.div3 {
height: 300px;
width: 35%;
background-color: pink;
float: left
}<script src=".9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>Here's a very simple jsFiddle:
function hideDiv2() {
$('.div2').hide();
}
function showDiv2() {
$('.div2').show();
}.div1 {
height: 300px;
width: 20%;
background-color: red;
float: left;
}
.div2 {
height: 300px;
width: 20%;
background-color: green;
float: left
}
.div3 {
height: 300px;
width: 35%;
background-color: pink;
float: left
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>that creates 3 divs in HTML, and provides two buttons to hide and show the middle div. What I'd like to know is how I keep div3 from sliding over to the left when div2 is hidden. In other words I'd like div3 to remain in its original location regardless of whether div2 is hidden or visible. It is required, however, that the initial HTML page be displayed with all 3 divs visible as shown initially in the jsFiddle.
Share edited Jul 17, 2015 at 2:15 misterManSam 24.7k11 gold badges71 silver badges91 bronze badges asked Jul 17, 2015 at 1:19 swingManswingMan 7521 gold badge6 silver badges17 bronze badges 1- possible duplicate of jQuery hide element while preserving its space in page layout – misterManSam Commented Jul 17, 2015 at 2:18
2 Answers
Reset to default 8Instead of using .hide(), set opacity to 0, or set visibility to hidden
$('.div2').css('visibility', 'hidden');
Note: opacity won't work in IE < 9
By adding an external div you can achieve what you looking for. Here is your code and jsFiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery./ui/1.10.4/jquery-ui.js"></script>
<style>
.div1 {
height:300px;
width:20%;
background-color: red;
float:left;
}
.div2 {
height:300px;
width:100%;
background-color: green;
float:left
}
.hideDiv {
height:300px;
width:20%;
float:left
}
.div3 {
height:300px;
width:35%;
background-color: pink;
float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()" >Show div2</button>
</body>
<script>
function hideDiv2()
{
$('.div2').hide();
}
function showDiv2()
{
$('.div2').show();
}
</script>
</html>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744930776a4601723.html
评论列表（0条）