Question

我对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;
}

我只有3个相同大小的正方形，我想将它们全部放在同一个地方。当我点击每个按钮时，我希望相应的方块淡入，另外2个淡出淡出。我应该如何利用 div id 和 class 来实现这种效果？

P.S。：我听说在同一个html中使用多个同名的id不是一个好习惯，例如这里的“广场”。那我该怎么解决这个问题呢？

谢谢！

Answer 1

首先：id是具有唯一值的属性;您的HTML中不能有多个id="square"。这甚至不是“不是一个好习惯”，而是HTML标准所禁止的。

第二：你应该绝对定位“正方形”;父元素（#container）应该有position: relative;。相对位置指的是当前元素之前的元素 - 在.square-2的情况下为square-3。

第三：如果您的“方块”没有内容，则无需淡入淡出 - 只需更改背景颜色。

Answer 2

你有一个良好的开端，只需要清理一些东西。

正如@feeela所提到的，您需要拥有唯一的Id属性。看起来你只是拥有类和id trans-versed
设置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;
}

<强> HTML 请注意使用data attribute

<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();
});

Answer 3

以下是我工作过的代码的jsFiddle。

我改变了你的风格，以便有一个定义大小的方形类。然后我创建了一个名为squareContainer的div，用于将盒子放在中心位置。这是必需的，因为绝对定位的彩色框忽略了边距。 squareContainer有助于定义它们的形状和空间，以便它不会弄乱其余的布局。

希望有所帮助。

使用css时如何将div放在另一个div上？

3 个答案: