1

我有五个图像的水平菜单。所有这 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 sprites 或更紧凑的 jqueryish 方式以更好的方式做到这一点，

谢谢你

4

2 回答 2

0

使用循环：

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');
    });
});
于 2011-02-20T07:54:53.697 回答
0

你可以做 css sprites，

制作包含所有状态的大图像并在 css 中制作类，使用 jquery 可以更改类名。

由于您总是只加载一张图像，因此性能会很好。

于 2011-02-20T07:55:19.207 回答