如何获得导航中下一页的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页。

如何获取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，懒得检查。