javascript - 如何在导航中获取下一页的href？

Question

例子：

<ul id="nav1">
    <li><a href="page1.html">Page 1</a></li>
    <li class="active"><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li><a href="page4.html">Page 4</a></li>
</ul>

在此示例中，我当前位于第 2 页，在第 2 页上，我想放置一个Next Page带有指向第 3 页的 url 的按钮。

如何获得href第 3 页（使用 JavaScript）？

Answer 1

如果你可以使用 jQuery

$('.active').next('li').find('a').attr('href');  // page3.html

否则在普通的javascript中（例如小提琴：http: //jsfiddle.net/gGRcX/2/）

var ul   = document.getElementsById('nav1'),
    link = ul.querySelector('li.active + li a');

if (link) {   /* in case there's no "active" class 
               * (or if it's applied on last li element) 
               */
    console.log(link.href) // page3.html
}

querySelectorAll适用于所有现代浏览器和 IE8+

Answer 2

$('#nav1 .active + li > a').attr('href');

CSS3 FTW :)

编辑：甚至可能是 CSS 2.x，懒得检查。