0

http://www.kars4kids.org/charity/v2/nirangahtml/program_pop/meet_animals.asp

上面的链接，当我选择下面的图标之一时。它更改为选定状态，但问题是我需要限制悬停效果并进一步选择该 Icon 。（因为我正在使用图像更改）。

下面是我完整的 jquery 代码。

$(document).ready(function(){
    $('#animal_content_text_horse').css("display", "block");
    $('#animal_pic_horse_span').css("display", "block");
    $('#page_animal_img_horse').css("display", "block");

$('.animal_thumb_link').each(function() {

    $(this).click(function(e) {
    e.preventDefault();
    default_set($(this).attr('id'));

    $(".animal_thumb_link").removeClass("thumbselected");
    $(this).addClass("thumbselected");
    $(".animal_thumb_link").find('img').addClass("imgHoverable");
    $(this).find('img').removeClass("imgHoverable");

   });  

});

       // Change the image of hoverable images
       $(".imgHoverable").hover( function() {
           var hoverImg = HoverImgOf($(this).attr("src"));
           $(this).attr("src", hoverImg).hide().fadeIn(0);
         }, function() {
           var normalImg = NormalImgOf($(this).attr("src"));
           $(this).attr("src", normalImg).show();
         }
       );


    function HoverImgOf(filename)
    {
       var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
       return filename.replace(re, "$1_r.$2");
    }
    function NormalImgOf(filename)
    {
       var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g");
       return filename.replace(re, "$1.$2");
    }

});

function default_set(obj12){

var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];


for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
    old_url = $("#" + obj12).children('img').attr('src');
    new_url = old_url.replace(/thumb/,'thumb_r');
    $("#" + obj12).children('img').attr('src',new_url);
}else{
    $('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}

}



}


function load_page(obj1,obj2,obj3){
    /* detect current div if so hide */
    current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
    current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
    current_pageimage = document.getElementById("pageimage_hidden").value;

    $('#' + current_pagepharadiv).css("display", "none");
    $('#' + current_pageheadertext).css("display", "none");
    $('#' + current_pageimage).css("display", "none");

    image_hover(obj1);
    image_hover(obj2);
    $('#' + obj3).fadeIn("fast");

    //image_hover(obj3);
    //$('#' + obj1).fadeIn("fast");
    //$('#' + obj2).fadeIn("fast");
    document.getElementById("pagepharadiv_hidden").value = obj1;
    document.getElementById("pageheadertext_hidden").value = obj2;
    document.getElementById("pageimage_hidden").value = obj3;

}

请各位大侠指教，加油！

4

1 回答 1

2

在我看来，你真的让事情变得比他们需要的更复杂。以下是我将如何实现该页面：

  • 底部方块作为div，使图像透明png
  • 使用 css 更改底部方形颜色：hover
  • 在服务器上为 div 中的每个动物生成整个顶部内容：因此您有 11 个 div 一个接一个，而不必在 3 个位置隐藏/显示内容。在下面的代码示例中，我假设他们有类animal-content
  • 将每个顶部 div 的 id 作为 html5 数据属性添加到相应的拇指链接

这样，您在 jQuery 中需要做的就是：

$(".animal_thumb_link").click(function() {
  var topId = $(this).data("topId");
  $(".animal_thumb_link").removeClass("thumbselected");
  $(this).addClass("thumbselected");

  $(".animal-content").toggle(function() { return this.id === topId; });
});
于 2012-05-21T09:04:28.517 回答