Question

我正在尝试在ul中找到当前页面并创建指向上一个或下一个li的链接

我的结构中有一个顶级菜单：

<ul id=menu>
  <li><a>Category A</a>
     <ul>
        <li><a>Sub Page 1</a></li>
        <li><a>Sub Page 2</a></li>
        <li><a>Sub Page 3</a></li>
      </ul></li>
 <li><a>Category B</a>
     <ul>
        <li><a>Sub Page 4</a></li>
        <li><a>Sub Page 5</a></li>
      </ul></li></ul>

我的想法是，如果我在第4页，后退按钮将带我到第3页，接下来将带我到第5页。

我可以用

获取我当前的文件名

 var url = window.location.pathname;
 var filename = url.substring(url.lastIndexOf('/')+1);

我的链接列表

document.getElementById('menu');

我猜测一旦我将文件名与链接匹配，我可以使用某种形式的next（）＆amp; previous（），但我不清楚如何在代码中找到我的变量文件名，然后选择下一个元素。元素将在同一级别，因此第3页的下一页将转到第4页，而不是第4页的父类别B.

我没有使用jQuery，如果可能的话，我更喜欢非jQuery代码。

Answer 1

这样的事情应该有效

function currentPath() {
  var url = window.location.pathname;
  return url.substring(url.lastIndexOf('/')+1);
}

function getHrefForLi(li) {
  return li.getElementsByTagName('a')[0].href.split('/').pop();
}

var lis = document.getElementById('menu').getElementsByTagName('li');

for (var i = 0, n = lis.length; i < n; i++) {
  if (getHrefForLi(lis[i]) == currentPath()) {
    var prev = i > 0 ? getHrefForLi(lis[i-1]) : null,
        next = i < n - 1 ? getHrefForLi(lis[i+1]) : null;
    break;
  }
}

prev和next将是上一个和下一个<a>代码href属性值的值，如果活动路径是第一个或null，则为{{1}}最后。

使用javascript的下一个和后退按钮

1 个答案: