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とクラスをどのように使用すればよいですか?

PS: 同じ html で同じ名前の id を複数使用することは、良い習慣ではないと聞きました。たとえば、ここでは「四角形」です。では、この問題にどのように対処すればよいでしょうか。

ありがとう！

4

3 に答える 3

1

最初:idは一意の値を持つ属性です。id="square"HTML に複数含めることはできません。それは「悪い習慣」ではありませんが、HTML 標準で禁止されています。

第二に、「正方形」を絶対に配置する必要があります。親要素 ( #container) にはposition: relative;. 相対位置は、現在の要素の直前の要素を参照します。これは.square-2の場合ですsquare-3。

3 番目: 「正方形」にコンテンツがない場合は、フェードインおよびフェードアウトする必要はありません。背景色を変更するだけです。

于 2012-07-26T16:13:27.430 に答える
0

これは、私が取り組んでいるコードのjsFiddleです。

サイズを定義する正方形のクラスがあるように、スタイルを変更しました。次に、ボックスを中央に配置するために使用する squareContainer という div を作成しました。これが必要なのは、絶対配置されたカラー ボックスがマージンを無視するためです。squareContainer は、レイアウトの残りの部分を台無しにしないように、形状とスペースを定義するのに役立ちます。

それが役立つことを願っています。

于 2012-07-26T17:00:19.543 に答える