jquery怎麼能把前面的點擊div放到前面？

Question

我想把前面的div帶到被點擊的位置，怎麼辦？

在這裏，我補充一些div在HTML：

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

我設置DIV的大小在這裏與CSS代碼：

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

Answer 1

指定z-index屬性爲三個的div，說1，在你的CSS。然後點擊後，增加被點擊的div的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); 
} 

請注意，這裏我假設所有你們三個的div都在同一容器股利。

Answer 2

創建一個名爲的類和風格它是這樣：

.front{ z-index:100; } 

然後添加/刪除如果需要，這一類：

$('.front-on-click').click(function(){ 
    $('.front').removeClass('front'); 
    $(this).addClass('front'); 
}); 

JSFiddle demo

Answer 3

$(".div1,.div2,.div3").click(function(){ 
    //assign all divs `z-index` = 90 including clicked one 
    $(".div1,.div2,.div3").css("z-index","90"); 

    //assign `z-index` = 100 to clicked one 
    $(this).css("z-index","100"); 
}); 

Answer 4

使用的z-index到div，當單擊更改其他人的z-index值

代碼段：

$(".div1").click(function() { 
 
    $('div[class^="div"]').css('z-index', '0'); 
 
    $(this).css('z-index', '10'); 
 
}) 
 
$(".div2").click(function() { 
 
    // make div 2 front of the screen 
 
    $('div[class^="div"]').css('z-index', '0'); 
 
    $(this).css('z-index', '10'); 
 
}) 
 
$(".div3").click(function() { 
 
    // make div 3 front of the screen 
 
    $('div[class^="div"]').css('z-index', '0'); 
 
    $(this).css('z-index', '10'); 
 
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="div1">A</div> 
 
<div class="div2">B</div> 
 
<div class="div3">C</div>

Answer 5

您可以使用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/。