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

在 CSSz-index中为三个 div 中的每一个指定一个属性，例如 。1然后在您单击时，增加z-index被单击的 div 的值。

$('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 都在同一个容器div 中。

于 2015-08-08T09:31:20.393 回答
3

创建一个名为的类front并将其设置为：

.front{ z-index:100; }

然后根据需要添加/删除此类：

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

JSFiddle 演示

于 2015-08-08T09:27:42.507 回答
0 
$(".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"); 
});
于 2015-08-08T09:29:06.323 回答
0

对 div 使用 z-index 并在单击时更改其他人的 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>

于 2015-08-08T09:30:02.950 回答
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 回答