jquery - リンクをクリックしたときに div を前面に表示する

Question

これは私が今持っているものです: http://jsfiddle.net/LQ4JT/833/

色付きの div に少し移動すると、4 つのリンクがあることがわかります。各リンクで div の 1 つが前面に表示されるようにします。

これどうやってするの？

$(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();
});