Клавиатура навигационная JQuery - PullRequest
Новая
       18

Клавиатура навигационная JQuery

0 голосов
/ 15 октября 2011

Я создал сайт, очень похожий на http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html. Теперь я хочу добавить навигацию по клавишам.Поэтому, когда я нажимаю стрелку вправо, она переходит к box2, а когда стрелка влево, возвращаюсь домой.Я пробовал этот урок http://jqueryfordesigners.com/adding-keyboard-navigation/

Итак: 

$().ready(function() {

$(document.documentElement).keyup(function (event) {
var direction = null;

// handle cursor keys
if (event.keyCode == 37) {
  // go left

  direction = 'prev';
} else if (event.keyCode == 39) {
  // go right
  direction = 'next';
}

if (direction != null) {
  $('.coda-slider-wrapper ul a#current').parent()[direction]().find('a').click();
}
});
});

И 

<div id="header" class="coda-slider-wrapper">
    <h1 id="logo">Scrolling Clouds</h1>
    <ul id="menu">
      <li><a href="#box1" class="link" id="current">Home</a></li>
        <li><a href="#box2" class="link">Box 2</a></li>
        <li><a href="#box3" class="link">Box 3</a></li>
        <li><a href="#box4" class="link">Box 4</a></li>
  </ul>
</div>

К сожалению, он не будет работать должным образом, потому что только один элемент имеет id = "current".Как заставить это работать?Как добавить динамический идентификатор?Пожалуйста, напишите мне весь код.

Спасибо за помощь.

1 Ответ

2 голосов
/ 15 октября 2011

Вам необходимо установить #current для любой текущей ссылки.Для этого используйте код, подобный следующему: 

$(function(){
    var list = $('.coda-slider-wrapper ul');
    list.find('a').click(function(e){
        list.find('a').removeAttr('id');
        this.id = 'current';
    });
});
...