1

我对 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来实现效果呢？

PS：我听说在同一个html中使用多个同名的id不是一个好习惯，例如这里的“正方形”。那么我应该如何解决这个问题呢？

谢谢！

4

3 回答 3

1

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

第二：你应该绝对定位“正方形”；父元素 ( #container) 应该有一个position: relative;. 相对位置是指当前位置之前的元素——.square-2在square-3.

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

于 2012-07-26T16:13:27.430 回答
0

这是我正在工作的代码的jsFiddle 。

我更改了您的样式，以便有一个定义大小的正方形类。然后，我创建了一个名为 squareContainer 的 div，我用它来将框定位在中心。这是必需的，因为绝对定位的彩色框会忽略边距。squareContainer 有助于定义它们的形状和空间，这样它就不会弄乱布局的其余部分。

希望有帮助。

于 2012-07-26T17:00:19.543 回答
0

你有一个好的开始，只是有几件事需要清理。

  1. 正如@feeela 提到的，您需要具有唯一的 Id 属性。看起来你只是有类和 id trans-versed
  2. 设置你的css类的继承思想。
  3. 您的 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 属性的使用

<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();
});
于 2012-07-26T16:43:13.913 回答