Question

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

我把它全部放在jsFiddle中：http://jsfiddle.net/xtian/ZG5HN/

CSS：

a{text-decoration: none;}
.visible{display:block;}
.hidden{display:none;}
.container{margin: 0 auto;width:298px;padding:0;overflow: hidden;}
    .dl{background-color: #e9e9e9;float: left; width:100%;font-family: Arial;}
    .dl .container .dl-top{float: left; width:301px;position: relative;margin-top:10px;}
    .dl .container .dl-top img.arrow-left{position: absolute; bottom:11px; left:11px;z-index: 1; cursor: pointer;}
    .dl .container .dl-top img.arrow-right{position: absolute; bottom:11px; right:11px;z-index: 1; cursor: pointer;}
    .dl .container .dl-top .dl-image{float:left; width:300px; height:168px; position: relative;}
    .dl .container .dl-top .dl-image p{float: left;width:224px;height: 30px;padding:6px 40px 5px 36px; font-size: 14px; font-weight: bold;color:#fff;background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/title_bg.png) repeat 0 0;position: absolute;bottom:0;line-height: 1.1; }
    .dl .container ul{margin:0 auto;float:left;width:100%;list-style: none;padding:0;}
    .dl .container ul li{background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/regular_bg.gif) repeat-x 0 0; float:left; width:98px;height:19px; padding-top:7px; border-right:1px solid #7b7b7b;text-align: center;}
    .dl .container ul li.dl-nav-1{border-left:1px solid #7b7b7b;}
    .dl .container ul li a{color:#000; text-align: center;font-size: 9px;font-weight: bold;}
    .dl .container img.indicator{position: absolute; top:0;}
    .dl .container ul li.current{background:transparent url(http://demo.omnigon.com/christian_bovine/snmobile/img/active_bg.gif) repeat-x 0 0;position: relative;}
    .dl .container ul li.current a{color:#fff;}
    .dl .container ul li.current span{position: absolute; left:45px; top: -3px;}

HTML：

<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>

jQuery的：

$(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();
        }
    });

    });

Answer 1

在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();
     }

})

使用Next / Prev Arrows加入导航 - Jquery

1 个答案: