jquery - 单击链接时将 div 置于最前面

Question

这就是我现在拥有的：http: //jsfiddle.net/LQ4JT/833/

当您移动到彩色 div 周围时，您会看到有 4 个链接，我希望每个链接将其中一个 div 带到前台。

我怎样才能做到这一点？

$(document).ready(function() {
var a = 3;
$('#box1,#box2,#box3,#box4').draggable({
start: function(event, ui) { $(this).css("z-index", a++); }
});
$('#dragZone div').click(function() {
$(this).addClass('top').removeClass('bottom');
$(this).siblings().removeClass('top').addClass('bottom');
$(this).css("z-index", a++);
});
);

Answer 1

我设法让它在这里工作：http: //jsfiddle.net/LQ4JT/834/

这是我使用的代码：

$("a").click(function() {
    $(".top").removeClass("top").addClass("bottom");
    var box = $(this).attr("href");
    //alert(box);
    $(box).addClass("top");
    $(box).css("z-index", a++);
});

Answer 2

这是更新的小提琴：http: //jsfiddle.net/LQ4JT/835/

$('.link').click(function(){
    var x = $(this).attr('val');
    console.log(x); 
    $('#box'+x).css('z-index',a++);    
});

添加class="link"&val='1'属性到<a>

Answer 3

这是一个用于“bringToFront”的 jQuery 函数。

jQuery.fn.extend({
    bringToFont: function (selector) {
        var max = Math.max.apply(null, $(this).siblings(selector).map(function () {
            return $(this).zIndex();
        }));
        $(this).zIndex(++max);
        return this;
    }
});

这是一个示例，此代码会将“#someDiv”移动到 z-index 堆栈的顶部。

$('#someDiv').mouseenter(function(){
    $(this).bringToFont();
});