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"＆amp; 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();
});

点击链接时将div带到前面

3 个答案: