Как вы перемещаетесь Навигация по неупорядоченному списку - PullRequest
Новая
       2

Как вы перемещаетесь Навигация по неупорядоченному списку

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

Я знаю, что вы получаете это много, но я пытаюсь улучшить этот горизонтальный веб-сайт прокрутки. demo , добавив стрелки направления (далее, пред). страница, например, при нажатии. UL выглядит так 

 <ul>
  <li><a href="#one">ONE</a></li>
  <li><a href="#two">TWO</a></li>
  <li><a href="#three">THREE</a></li>
  <li><a href="#four">FOUR</a></li>
  <li><a href="#five">FIVE</a></li>
</ul>

Я знаю, что это возможно через javascript и / или jquery, поэтому, если вы знаете, пожалуйста, помогите Кроме того, если это возможно, как бы я перейти с последней страницы (#five) на первую и наоборот

Ответы [ 2 ]

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

Пример использования стрелок вверх и вниз 

var lias = $('li a');
lias.first().addClass('sel');
$(document).keydown(function(e) {
    var sel = $('.sel');
    sel.removeClass('sel')
    if (e.which == 40) {
        sel.parent().next('li').find('a').addClass('sel');
        if ($('.sel').length == 0) {
         $('li a').first().addClass('sel');   
        }
    } else if (e.which == 38) {
        sel.parent().prev('li').find('a').addClass('sel');
        if ($('.sel').length == 0) {
         $('li a').last().addClass('sel');   
        }
    }

})
0 голосов
/ 18 октября 2011

Вот несколько примеров: 

 $('li').each(function() {
        //alert($(this).text());
    });


alert($('li:eq(2)').text());   -> returns THREE
alert($('li:eq(2)').prev().text()); -> returns TWO
alert($('li:eq(2)').next().text()); -> returns FOUR

чтобы получить href: 

alert($('li:eq(2) a').attr('href')); -> returns #three

Обновление 

$('li:eq(0)').addClass('selected');

$('#next').click(function(ev) {
    ev.preventDefault();
    var selectedLi = $('li.selected');
    if (selectedLi.index() == 4) {
        $('li:eq(0)').click();
    }
    else {
        selectedLi.next().click();
    }
    selectedLi.removeClass('selected');
});

$('#prev').click(function(ev) {
    ev.preventDefault();
    var selectedLi = $('li.selected');
    //first
    if (selectedLi.index() == 0) {
        $('li:eq(4)').click();
    } else {
        selectedLi.prev().click();
    }
    selectedLi.removeClass('selected');
});


$('li').click(function() {
    var hreff = $('a', this).attr('href');
    $(this).addClass('selected');
    alert(hreff);
});

пример: навигационный несортированный список

...