0

我正在寻找一种解决方案，使上一个和下一个箭头可以循环浏览导航链接。类似于下面的链接，但是当您单击 Prev 或 Next you 时，它会将您带到导航 li 中的下一个锚点并加载新页面。

 <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/

主页| 音乐 | 视频 | 接触

上一页 // 下一页

4

1 回答 1

0

您可以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');

    });
});
于 2013-08-02T22:07:26.940 回答