Question

我有一个五个图像的水平菜单。所有这5个图像都具有活动和灰色状态。当特定图像处于活动状态时，其余4需要变灰。同样适用于其他图像。

我是在jquery中完成的，而且代码也没那么优化和好。就像这样

    $("document").ready(function(){
  $("#imageidone").click(function() {
         $("#imageidone").attr("src","/path to image_active");
         $("#imageidtwo").attr("src","/path to image_grayed");
         $("#imageidthree").attr("src","/path to image_grayed");
         $("#imageidfour").attr("src","/path to image_grayed");
         $("#imageidfive").attr("src","/path to image_grayed");
   });
      $("#imageidtwo").click(function() {
        $("#imageidone").attr("src","/path to image_grayed");
        $("#imageidtwo").attr("src","/path to image_active");
        $("#imageidthree").attr("src","/path to image_grayed");
        $("#imageidfour").attr("src","/path to image_grayed");
        $("#imageidfive").attr("src","/path to image_grayed"); });
and so on for imageidthree, imageidfour, imageidfive
     });

如何以更好的方式使用CSS精灵或更紧凑的jqueryish方式来实现它，

谢谢

Answer 1

使用循环：

var all = ['#imageidone', '#imageidtwo', '#imageidthree', '#imageidfour', '#imageidfive'];

$.each(all, function(selector, idx) {
    $(selector).click(function() {
        $(all.join()).attr('src', '/path to image_grayed');

        $(selector).attr('src', '/path to image_active');
    });
});

Answer 2

你可以做css sprites，

使用所有状态创建一个大图像并在css中创建类并使用jquery可以更改类名。

由于您始终只加载一张图片，因此效果会很好。

更好的JQueryish方式或CSS精灵

2 个答案: