2

クリックされた div を前面に表示したいのですが、どうすればよいですか?

ここで、HTML にいくつかの div を追加しました。

<div class="div1">A</div>
<div class="div2">B</div>
<div class="div3">C</div>

ここで CSS コードを使用して div のサイズを設定します。

div {
    width: 100px;
    height: 100px;
    background-color: #666;
    border-color: #333;
    border-style: solid;
    position: absolute;
    line-height: 100px;
    text-align:center;
    font-size:50px;
}
.div1 {
    left: 91px;
    top: 66px;
}
.div2 {
    left: 132px;
    top: 152px;
}
.div3 {
    left: 171px;
    top: 90px;
}

ここでも、divがクリックされたときにアクティブなdivを変更したいのですが、クリックすると前面に表示する必要があります.Jqueryでそれを行うにはどうすればよいですか:

$(".div1").click(function() {
    // make div 1 front of the screen
})
$(".div2").click(function() {
    // make div 2 front of the screen
})
$(".div3").click(function() {
    // make div 3 front of the screen
})
4

5 に答える 5

4

CSS でz-index3 つの div のそれぞれにプロパティを指定します。次に、クリックすると、クリックされた div1の を増やします。z-index

$('div[class^="div"]').click(function(){
    $(this).css('z-index', 2);
    //reset other sibling div's z-index to default value (i.e. 1)
    $(this).siblings('div').css('z-index', 1);
});

ここでは、3 つの div がすべて同じコンテナーdiv にあると想定していることに注意してください。

于 2015-08-08T09:31:20.393 に答える
0

配置された要素の z-index でそれを行うことができます。

$('.div1, .div2, .div3').click(function(){   
    $('div').css('zIndex',2);
    $(this).css('zIndex',200);    
});

ここですべての div の zIndex リセットを制限できるとよいでしょう。そのためには、div 用に別のクラスを追加します。

.focusable{
    position:absolute;
}

<div class="div1 focusable">A</div> 
<div class="div2 focusable">B</div>
<div class="div3 focusable">C</div>

$('.focusable').click(function(){   
    $('.focusable').css('zIndex',2);
    $(this).css('zIndex',200);    
});

jsfiddle の例https://jsfiddle.net/L87ar9ax/。

于 2015-08-08T09:39:49.533 に答える