我正在尝试通过一系列网页为导航按钮(上一页/下一页)编写JavaScript。页面url列表与按钮显示在同一html中。
所以使用下面的例子,如果我在'test_pg5.htm'页面上,单击Previous应该转到'test_pg4.htm',单击Next应该转到'test_coursecomplete.htm'。
超文本标记语言:
<ul class="menu">
<li data-mc-id="0"><a href="../../courses/test/comms_view_intro.htm">Main Course Page</a>
<ul class="sub-menu">
<li data-mc-id="1"><a href="../../courses/test/test_pg1.htm">Topic 1</a></li>
<li data-mc-id="2"><a href="../../courses/test/test_pg2.htm">Topic 2</a></li>
<li data-mc-id="3"><a href="../../courses/test/test_pg3.htm">Quiz 1</a></li>
<li data-mc-id="4"><a href="../../courses/test/test_pg4.htm">Topic 3</a></li>
<li data-mc-id="5"><a href="../../courses/test/test_pg5.htm" class="selected" aria-current="true">Quiz 2</a></li>
<li data-mc-id="6"><a href="../../courses/test/test_coursecomplete.htm">Course Completion Page</a></li>
</ul>
</li>
</ul>
<button class="prevLink">Previous</button>
<button class="nextLink">Next</button>
字符串
尝试使用this similar question的答案创建下面的脚本,但它无法正常工作。
脚本:
$(document).ready(function() {
var links = Array.prototype.slice.call(document.querySelectorAll('.menu a'));
var index = links.indexOf(currentFocus);
$('.nextLink').click(function() {
window.location.href = links[index + 1];
});
$('.prevLink').click(function() {
window.location.href = links[index - 1];
});
});
型
1条答案
按热度按时间c6ubokkw1#
几件事:
首先,您不需要将querySelectorAll转换为数组。
对于我的答案,我正在检查是否选择了一个元素,如果它被选中,则获取父元素的mcId并将其转换为数字,如果没有,则将index设置为0。
然后在我的点击事件中,我只是检查索引是在下一次点击的末尾,还是在前一次点击的开头。if语句允许您创建循环,因为它们将相应地调整索引。