Jquery鍵盤導航 - 激活項目頁面加載

Question

沒有jQuery的經驗，只是想讓這個簡單的事情工作。

我已經有圖像可以通過鍵盤上的左/右鍵導航。單擊結果框，你可以看到：

http://jsfiddle.net/XZT9P/4/

我只是想更新這個，這樣在頁面加載時，其中一個項目是默認激活。理想情況下，我希望能夠硬編碼哪一個。現在，我需要按下鍵盤上的某個鍵才能使一個（第一個）處於活動狀態。有任何想法嗎？

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

您可以在 「活動」 類簡單地添加到在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的版本，你可以在http://jsfiddle.net/XZT9P/6/

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