Кнопки «Предыдущий/Далее» для навигационных ссылок

Я ищу решение, чтобы иметь стрелки «Предыдущий» и «Следующий», которые будут циклически перемещаться по навигационным ссылкам. Подобно ссылке ниже, но когда вы нажимаете «Предыдущий» или «Следующий», вы перейдете к следующему якорю в навигационной панели и загрузите новую страницу.

 <div id="nav" class="text-spacing">
  <ul id="nav">
    <li><a href="/news.html" class="nav-button">News</a></li>
    <li><a href="/tourdates.html" class="nav-button">Tour Dates</a></li>
    <li><a href="/music.html" class="nav-button navSelected">Music</a></li>
    <li><a href="/video" class="nav-button">Video</a></li>
    <li><a href="/about" class="nav-button">About</a></li>
    <li><a href="/contact" class="nav-button">Contact</a></li>
  </ul>
</div>

<div id="arrow-left" class="slide-right"><a href="#" class="prev-button" title="Previous"><img src="images/arrow-left.png" alt="Left Arrow" width="25" height="48"></a></div>
<div id="arrow-right" class="slide-left"><a href="#" class="next-button" title="Next"><img         src="images/arrow-right.png" alt="Right Arrow" width="25" height="48"></a></div

$(document).ready(function () {
    $('.next-button').click(function () {
        var $el = $('#nav li a.navSelected').removeClass('navSelected');
        var $next = $el.parent().next();

        if ($next.length == 0) $next = $('#nav li:first');

        $next.find('a.nav-button').addClass('navSelected');
    });


    $('.prev-button').click(function () {
        var $el = $('#nav li a.navSelected').removeClass('navSelected');
        var $prev = $el.parent().prev();

        if ($prev.length == 0) $prev = $('#nav li:last');

        $prev.find('a.nav-button').addClass('navSelected');
    });
});

http://jsfiddle.net/Zevan/H2hjr/

Главная | Музыка | Видео | Контакт

Предыдущий // Следующий


jquery next nav
person user1178780    schedule 02.08.2013    source источник
comment
Как вы ожидаете, что это загрузит новую страницу?   -  person Jason P    schedule 03.08.2013
comment
Но ваша скрипка имеет другой код без якорей. Почему бы вам не обновить его, чтобы, по крайней мере, включить в него html с якорями, даже если вы не можете заставить JS работать так, как вы хотите. Кроме того, учитывая, что ваш образец html довольно короткий (и останется таким после добавления якорей), вы должны включить его непосредственно в вопрос (в дополнение к скрипке).   -  person nnnnnn    schedule 03.08.2013
comment
Я не владею javascript. Я видел, как этот код циклически перемещался по моим навигационным ссылкам, меняя класс. Мне бы хотелось, чтобы при нажатии стрелки вправо и влево можно было перейти к следующей ссылке в навигации и загрузить ее. Это возможно?   -  person user1178780    schedule 03.08.2013
comment
Обновлен код для отображения моей навигации и кнопок со стрелками влево и вправо.   -  person user1178780    schedule 03.08.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете получить href из своих ссылок и использовать его для запуска window.location.href следующим образом:

$(document).ready(function () {
    $('.next-button').click(function () {
        var $el = $('#nav li a.navSelected').removeClass('navSelected');
        var $next = $el.parent().next();

        if ($next.length == 0) $next = $('#nav li:first');

        $next.find('a.nav-button').addClass('navSelected');

        // Added window.location.href to follow the selected links href
        window.location.href = $next.find('a.nav-button').attr('href');
    });


    $('.prev-button').click(function () {
        var $el = $('#nav li a.navSelected').removeClass('navSelected');
        var $prev = $el.parent().prev();

        if ($prev.length == 0) $prev = $('#nav li:last');

        $prev.find('a.nav-button').addClass('navSelected');
        // Added window.location.href to follow the selected links href
        window.location.href = $prev.find('a.nav-button').attr('href');

    });
});
person putvande    schedule 02.08.2013
comment
Удивительно! Очень признателен! - person user1178780; 03.08.2013
comment
Добро пожаловать. Если это поможет вам, вы можете принять этот ответ. Спасибо - person putvande; 03.08.2013
comment
На самом деле, по какой-то причине это циклическое переключение между первой и последней ссылкой. Есть идеи, почему? - person user1178780; 03.08.2013
comment
Когда вы переходите на другую страницу, вам нужно активировать текущий элемент навигации, иначе вы будете получать ту же ссылку. - person putvande; 03.08.2013