jQuery를 메뉴 이미지는 문제

Question

웹 사이트를 제어합니다. 메뉴 코드는 다음과 같습니다.

<ul id="menu" style="list-style:none"> 
     <li><a href="#" class="current" onclick="jQuery.scrollTo('#home', 1000)"><img class="hoverImage" src="img/home_highlight.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#asics', 1000)"><img class="hoverImage" src="img/asics.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#tooheys', 1000)"><img class="hoverImage" src="img/tooheys.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#olympics', 1000)"><img class="hoverImage" src="img/olymp.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#panadol', 1000)"><img class="hoverImage" src="img/panadol.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#plants', 1000)"><img class="hoverImage" src="img/plantsplus.png"/></a></li> 
     <li><a href="#" onclick="jQuery.scrollTo('#kia', 1000)"><img class="hoverImage" src="img/kia.png"/></a></li> 
    </ul> 

여기에는 두 가지 요소가 있습니다. 먼저, li.a를 클릭하면 scrollTo가 사용되어 페이지를 위아래로 이동합니다. 다음과 같이 둘째, 유혹/이미지를 클릭하면,에 "_highlight.png"소스 변화를 전환 :이 모든 작품을 잘

// MENU HOVER IMAGE: 
$(function() { 
    $('img.hoverImage').mouseover(function() { 
     if ($(this).is('.activeImage')) return; 
     var src = $(this).attr("src").match(/[^\.]+/) + "_highlight.png"; 
     $(this).attr("src", src); 
    }).mouseout(function() { 
     if ($(this).is('.activeImage')) return; // Skip mouseout for active image 
     var src = $(this).attr("src").replace("_highlight", ""); 
     $(this).attr("src", src); 
    }).click(function() { 
     // remove previous active state 
     $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout'); 
     // set new active state 
     $(this).addClass('activeImage'); 
    }); 
}); 

합니다. 그러나 키보드 컨트롤을 페이지에 추가하려고하면 모든 것이 무너집니다. 나는 다음과 같은 코드를 사용하는 이전/다음 메뉴 항목으로 이동/아래 화살표를 사용하고 싶습니다 : 그러나,

// Add "current" class to #menu links when clicked 

$("#menu a").click(function(e) { 
    $(".current").removeClass("current"); 
    $(this).addClass("current");  
}); 


// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD 

$(document.documentElement).keyup(function (event) { 
    // handle cursor keys 
    if (event.keyCode == 38) { 
    // go up 
    $("a.current") 
     .parent() // moves up to the li element 
     .prev() // moves to the adjacent li element 
     .find("a") // moves down to the link 
     .click(); // triggers a click on the previous link 
    } else if (event.keyCode == 40) { 
    // go right 
    // same as above, but just on one line and next instead of prev 
    $("a.current").parent().next().find('a').click(); 
    } 
}); 

이 작동을 (분명히)이 성공적으로 전환하지 않는 클릭 이벤트를 트리거 _highlight.png 함수. keypress 이벤트가 올바른 div로 스크롤 될뿐만 아니라 올바른 메뉴 항목을 강조 표시/강조 표시하지 않도록 코드를 변경하는 가장 좋은 방법은 무엇입니까?

Answer 1

짧은 거의 더 많은 작업, 대답이 필요 :

$(function() { 
    function highlight(e) { 
    var _this = $(this), 
     src = _this.attr("src").replace("_highlight", "").slice(0, -4) + "_highlight.png"; 

    _this.attr("src", src); 
    } 

    function refresh() { 
    $("#menu a img").each(function(e) { 
     var _this = $(this), 
      src = _this.attr("src").replace("_highlight", ""); 

     _this.attr("src", src); 
    }); 

    highlight.call($("#menu a.current img")); 
    } 

    function scroll(item) { 
    jQuery.scrollTo(item, 1000); 

    // Add "current" class to appropriate link 
    $("#menu a").removeClass("current"); 

    var link = $("#menu a[href=" + item + "]"); 
    link.addClass("current"); 

    refresh(); 
    } 

    $("#menu a").click(function(e) { 
    // Pull the hash URI from the href. 
    scroll($(this).attr('href')); 
    }).find("img").hover(highlight, refresh); 
}); 

// CONTROL BOTTOM MENU WITH UP/DOWN ON KEYBOARD 

$(document).keyup(function(e) { 
    var p = $("a.current").parent(); 
    if (e.keyCode === 38) { 
    p.prev().find("a").click(); 
    } else if (e.keyCode === 40) { 
    p.next().find('a').click(); 
    } 
}); 

더 이상 답 : 추상, 사용 나무 등의 방법을, 나는 여기에 사용 된 전략의 전체 개요를주고 나중에 다시있을거야 .