如何在使用css时将div放在另一个div上？
我对css和JQuery非常陌生，我对这个问题感到很困惑。我的代码非常简短，如下所示：
<script>
$(document).ready(function(){
$(".square-2").hide();
$(".square-3").hide();
$("#btn-1").click(function(){
$(".square-2").fadeOut(); $(".square-3").fadeOut(); $(".square-1").fadeIn();
});
$("#btn-2").click(function(){
$(".square-1").fadeOut(); $(".square-3").fadeOut(); $(".square-2").fadeIn();
});
$("#btn-3").click(function(){
$(".square-1").fadeOut(); $(".square-2").fadeOut(); $(".square-3").fadeIn();
});
});</script>
</head>
<body>
<div id="container">
<div id="square" class="square-1"></div>
<div id="square" class="square-2"></div>
<div id="square" class="square-3"></div>
</div>
<center><button id="btn-1">square-1</button><button id="btn-2">square-2</button><button id="btn-3">square-3</button></center>
</body>相应的css文件如下所示：
#container{
width:300px;
margin:auto auto;
position:relative;
border:1px solid;
}
#square{
position:relative;
margin:auto auto;
width:200px;
height:200px;
}
.square-1{
background:#CC66CC;
}
.square-2{
background:#FFFF00;
}
.square-3{
background:#66FF00;
}我只有三个同样大小的正方形，我想把它们放在同一个地方。当我点击每个按钮时，我想要相应的正方形淡入，而另外的2个则淡出。如何利用div id和类来实现这种效果？
P.S.：我听说在同一个html中使用多个同名的id不是一个好习惯，例如这里的“正方形”。那么，我应该如何解决这个问题呢？
谢谢!
回答 3
Stack Overflow用户
发布于 2012-07-26 16:13:27
首先：id是一个具有唯一值的属性；在您的id="square"中不能有多个id="square"。这甚至不是“不好的习惯”，而是HTML标准所禁止的。
第二:绝对应该定位“正方形”；父元素(#container)应该有一个position: relative;。相对位置指的是当前元素之前的元素--在.square-2的情况下是square-3。
第三:如果你的“方块”没有内容，就没有必要让它们褪色--只要改变背景颜色就行了。
Stack Overflow用户
发布于 2012-07-26 16:43:13
你有一个良好的开端，只是有一些东西需要清理。
- 正如@feeela所提到的，您需要有唯一的Id属性。看上去你只是把这门课和id翻译过来了
- 设置css类的继承思想。
- 您的JavaScript代码需要一些工作，所以您不会进行多次调用，考虑连接到所有按钮并相应地淡出图像。
CSS
.square {
position:relative;
margin:auto auto;
width:200px;
height:200px;
}
.square.one{
background:#CC66CC;
}
.square.two{
background:#FFFF00;
}
.square.three{
background:#66FF00;
}注意到数据属性的使用
<div id="container">
<div id="square1" class="square one">Square One</div>
<div id="square2" class="square two">Square Two</div>
<div id="square3" class="square three">Square Three</div>
</div>
<div id="buttons">
<button id="btn-1" data-linkedto="square1">square-1</button><button id="btn-2" data-linkedto="square2">square-2</button><button id="btn-3" data-linkedto="square3">square-3</button>
</div>Javascript --这是最好的解决方案，因为它可能需要一些改进，但它应该会让您朝着正确的方向思考。
$("button", "#buttons").click(function () {
var $me = $(this);
var linkedTo = $me.data('linkedto');
$("#container").children().fadeOut("fast");
$("#" + linkedTo, "#container").fadeIn();
});Stack Overflow用户
发布于 2012-07-26 17:00:19
下面是我所使用的代码的jsFiddle。
我更改了您的样式，以便有一个正方形类来定义大小。然后，我做了一个名为squareContainer的div，我用它来定位中心的盒子。这是必要的，因为绝对定位的彩色框忽略边距。squareContainer帮助定义它们的形状和空间，这样它就不会破坏布局的其余部分。
希望这能有所帮助。
https://stackoverflow.com/questions/11673460
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号