导航链接的上一个/下一个按钮

Posted 2023-02-25

【中文标题】导航链接的上一个/下一个按钮

【英文标题】：Prev/Next Buttons for Navigation Links

【发布时间】：2013-08-02 21:40:44

【问题描述】：

我正在寻找一种解决方案，让“上一个”和“下一个”箭头在导航链接中循环。与下面的链接类似，但当您单击 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"   ></a></div>
<div id="arrow-right" class="slide-left"><a href="#" class="next-button" title="Next"><img         src="images/arrow-right.png"   ></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/

首页 |音乐 |视频 |联系方式

上一个 // 下一个

【问题讨论】：

您希望它如何加载新页面？

但是你的小提琴有不同的代码，没有锚。即使您不能完全让 JS 以您想要的方式工作，为什么不更新它以至少包含带有锚点的 html。此外，鉴于您的示例 html 很短（并且在您添加锚之后仍然会如此），您应该将它直接包含在问题中（除了小提琴）。

我不精通 javascript。我通过更改类看到此代码在我的导航链接中循环。单击以转到导航中的下一个链接并加载它时，我会喜欢左右箭头。这可能吗？

更新代码以显示我的导航和左右箭头按钮

【参考方案1】：

您可以从链接中获取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');

    );
);

【讨论】：

太棒了！非常感谢！

不客气。如果这对您有所帮助，您能否接受这个答案。谢谢

实际上，这是出于某种原因在第一个链接和最后一个链接之间循环。知道为什么吗？

当您转到另一个页面时，您需要将当前导航项设置为活动状态，否则您会得到相同的链接。