1

我有这个例子：点击！

使用以下 jquery：

$(".abox-1").click(function(){
    $("#box-2, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1").css({
        zIndex: "999"
    });
    $("#box-1").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-2").click(function(){
    $("#box-2").css({
        zIndex: "999"
    });
    $("#box-2").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-1, #box-3").css({
        zIndex: "-999"
    });
    $("#box-1, #box-3").stop().delay(1000).animate({
        top: "100%"
    });
});
$(".abox-3").click(function(){
    $("#box-1, #box-2").css({
        zIndex: "-999"
    });
    $("#box-3").css({
        zIndex: "999"
    });
    $("#box-3").stop().animate({
        top: "0%"
    }, 1000, "easeInOutExpo");
    $("#box-2, #box-1").stop().delay(1000).animate({
        top: "100%"
    });
});

但是，如您所见，这是非常丑陋的代码！并且占用大量空间。我怎样才能做出一个功能呢？或者我如何缩短代码？

4

2 回答 2

2

也许是这样的？

$(document).ready(function(){
    $('a[class^="abox"]').click(function() {
        if (this.className == 'abox') {
            $('div[id^=box-]').animate({top: '100%'}, 1000, "easeInOutExpo").css({zIndex: "-999"});
        }else{
            var thisbox = $('#'+this.className.replace('a', '')),
                otherbox = $('div[id^=box-]').not(thisbox);

            otherbox.css({zIndex: "-999"}).stop().delay(1000).animate({top: '100%'});
            thisbox.css({zIndex: "999"}).stop().animate({top: '0%'}, 1000, "easeInOutExpo");
        }
    });
});

小提琴 ​</p>

于 2012-04-22T12:04:25.077 回答
1

您应该将类​​更改abox-i为 idaboxi并使用以下代码：

function show_box(number) {
  for(var i = 1; i <= 3; i++) {
    if (i == number) { // we need to show this element
      $("#box-" + i).css({
        zIndex: "999"
      }).stop().animate({
        top: "0%"
      }, 1000, "easeInOutExpo");
    } else { // we need to hide this element
      $("#box-"+i).css({
        zIndex: "-999"
      }).stop().delay(1000).animate({
        top: "100%"
      });
    }
  }
}

$("#nav a").click(function() {
  var id = parseInt(this.id.substr(4));
  if (id > 0) show_box(id);   
});

提琴手

于 2012-04-22T11:53:50.747 回答