Question

没有jquery经验，只想让这个简单的事情发挥作用。

我有可以通过键盘上的左/右键导航的图像。单击结果框，您可以看到：

我只是想更新它，以便在页面加载时，其中一个项目默认处于活动状态。理想情况下，我希望能够对哪一个进行硬编码。就像现在一样，我需要按键盘上的一个键才能激活一个键（第一个键）。有什么想法吗？

HTML：

<div class="title"><a href="http://www.google.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>
<div class="title"><a href="http://www.reddit.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>
<div class="title"><a href="http://www.yahoo.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>

CSS：

.title {
    display: inline-block;
}
.title.active {
    border: 3px solid black !important;
}

JAVASCRIPT：

var $title = $('.title')
var o = {
    37: 'prev',
    39: 'next'
}

$(document).on('keyup', function (e) {
    var dir = o[e.which];
    var $active = $('.active'),
        i = $title.index($active);
    if (!$active.length) {
        $title.first().addClass('active');
        return;
    } else {
        if (dir === 'next' || dir === 'prev') {
            $active.removeClass('active')[dir]().addClass('active');
        } else if(e.keyCode == '13') {
            link = $('.active a').attr('href');
            alert(link); // window.location.href = link;
        }
    }
})

Answer 1

您只需添加＆＃34;有效＆＃34;类到HTML中的一个链接，如下所示：http://jsfiddle.net/XZT9P/5/

<div class="title active"><a href="http://www.google.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>
<div class="title"><a href="http://www.reddit.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>
<div class="title"><a href="http://www.yahoo.com"><img src="http://www.eonhq.com/m/images/pi1.png"></a></div>

对于纯jQuery版本，您可以在document {ready上使项目处于活动状态，如http://jsfiddle.net/XZT9P/6/

$(document).ready(function () {
    $title.first().addClass('active');
});

Jquery键盘导航 - 激活页面加载项目

1 个答案: