我正在制作一个带有后退和前进链接的导航控件,以便您在链接列表中前进或后退。当你点击“下一页”时,它会前进到列表的第一页,但随后会停留在那里。我如何设置访问链接为活动,使其前进顺序,即从1到2,然后从2到3等...谢谢你的帮助。
$(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');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li><a href="pagea.html"class="nav-button">A</a></li>
<li><a href="pageb.html" class="nav-button">B</a></li>
<li><a href="pagec.html" class="nav-button">C</a></li>
<li><a href="paged.html"class="nav-button">D</a></li>
<li><a href="pagef.html" class="nav-button">F</a></li>
</ul>
<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>
Steven在这个Github中提供了答案:
https://github.com/Steven0213/Back_and_next_nav
1条答案
按热度按时间ruarlubt1#
我已经为你创建了this小提琴。Bootstrap和jQuery我不知道你是否知道Bootstrap和jQuery。如果你还有什么问题就问吧。
1:
编辑1
此数组是您的网页的名称数组。这是什么意思,例如你有一个网页叫做一,二...
你把这些名字放在数组中。
如果名称不匹配,它将不会打开任何网页,也不会使页面处于活动状态,因为它找不到与当前页面名称匹配的页面。
编辑2
我创建了一个Github project来创建一个演示。