使用下一个/上一个箭头连接导航-Jquery

底部有三个导航链接，将显示图像和标题。这部分工作得很好，但用户也可以单击箭头移动到下一个图像/标题。这也会改变底部导航，使导航上的类为.current。因此，用户有两个选项来查看图像/标题导航或箭头，它们应该一起工作

我已将其全部放在JSFIDLE中：

CSS:

html:

---

在ready函数中添加以下代码：

$(document).keypress(function(event){
    if(event.keyCode == '37') {
        tgtDiv = $(".dl-image:visible").prev(".dl-image");
    }
    else if(event.keyCode == '39') {
        tgtDiv = $(".dl-image:visible").next(".dl-image");
    }
    var allDivs = $(".dl-image");
    if(tgtDiv.length>0){
         allDivs.hide()
         tgtDiv.show();
     }

})

---

它可以在mozilla firefox上正常工作，将keypress更改为keyup。这也适用于其他浏览器

<div class="dl">
        <div class="container">
            <div class="dl-top">
                <img class="arrow-left" src="http://demo.omnigon.com/christian_bovine/snmobile/img/arrow_left.png" alt="" />
                    <div class="dl-image visible dl-1">
                        <img class="" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image1.jpg" alt="" />
                        <p class="headline">Comebackers: Pitchers who need strong springs</p>
                    </div>
                    <div class="dl-image hidden dl-2">
                        <img class="dl-2" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image2.jpg" alt="" />
                        <p class="headline">TEST #2: Lets see how this one works</p>
                    </div>
                    <div class="dl-image hidden dl-3">
                        <img class="dl-3" src="http://demo.omnigon.com/christian_bovine/snmobile/img/dl-image3.jpg" alt="" />
                        <p class="headline">TEST #3: Sports are fun, yay!!</p>
                    </div>
                <img class="arrow-right" src="http://demo.omnigon.com/christian_bovine/snmobile/img/arrow_right.png" alt="" />    
            </div>
            <!-- dl top -->    
            <ul>
                <li class="dl-nav-1 current"><a href="#">Spring Training 2001</a><span class="visible"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li>
                <li class="dl-nav-2"><a href="#">NFL 2011</a><span class="hidden"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li>
                <li class="dl-nav-3"><a href="#">Fantasy Baseball</a><span class="hidden"><img src="http://demo.omnigon.com/christian_bovine/snmobile/img/indicator.png" alt="" /></span></li>
            </ul>
        </div>
        <!-- container -->
    </div>

$(document).ready(function() {
    //On Click Event
    $(".dl-nav-1").click(function() {
        $(".dl .container ul li").removeClass("current"); //Remove any "current" class
        $(this).addClass("current");
        $(".dl-nav-2 span, .dl-nav-3 span, .dl-2, .dl-3").removeClass("visible").addClass("hidden");
        $(".dl-nav-1 span, .dl-1").removeClass("hidden").addClass("visible");
        return false;
    });
    $(".dl-nav-2").click(function() {
        $(".dl .container ul li").removeClass("current"); //Remove any "current" class
        $(this).addClass("current");
        $(".dl-nav-1 span, .dl-nav-3 span, .dl-1, .dl-3").removeClass("visible").addClass("hidden");
        $(".dl-nav-2 span, .dl-2").removeClass("hidden").addClass("visible");
        return false;
    });
    $(".dl-nav-3").click(function() {
        $(".dl .container ul li").removeClass("current"); //Remove any "current" class
        $(this).addClass("current");
        $(".dl-nav-1 span, .dl-nav-2 span, .dl-1, .dl-2").removeClass("visible").addClass("hidden");
        $(".dl-nav-3 span, .dl-3").removeClass("hidden").addClass("visible");
        return false;
    });

    $(".arrow-left, .arrow-right").click(function(){
        var tgtDiv = null;
        if($(this).hasClass("arrow-left")){
            tgtDiv = $(".dl-image:visible").prev(".dl-image");
        }
        else{
            tgtDiv = $(".dl-image:visible").next(".dl-image");
        }
        var allDivs = $(".dl-image");
        if(tgtDiv.length>0){
            allDivs.hide()
            tgtDiv.show();
        }
    });

    });

$(document).keypress(function(event){
    if(event.keyCode == '37') {
        tgtDiv = $(".dl-image:visible").prev(".dl-image");
    }
    else if(event.keyCode == '39') {
        tgtDiv = $(".dl-image:visible").next(".dl-image");
    }
    var allDivs = $(".dl-image");
    if(tgtDiv.length>0){
         allDivs.hide()
         tgtDiv.show();
     }

})