我正在寻找一种解决方案,让我们可以在导航链接中循环显示上一个和下一个箭头。与下面的链接类似,但是当您单击Prev或Next you时,它将转到nav 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/
主页 |音乐|视频|接触
上一个//下一个
答案 0 :(得分: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');
});
});