Question

我有一个名为index.php的页面，其中包含一个div列表：

<div id="links">
     <ul>
        <li><a href="example1.php">example1</a></li>
        <li><a href="example2.php">example2</a></li>
        <li><a href="example3.php">example3</a></li>
        ......
        <li><a href="exampleN.php">exampleN</a></li>
    </ul>
</div>

这是我网站的页面列表，显示在index.php页面中。我想在网站的每个页面添加一个“prev | home | next”菜单（example1，example2，example3，...，exampleN），其中“prev”将我带到上一个示例，然后是下一个示例，即如果我正在观看第3个示例（页面示例3.php），则prev将我带到第2个示例（page example2.php）等。

我想使用不基于固定数组（由用户定义）的脚本，因为每次将新页面添加到index.php列表时我都不想更新此数组。 / p>

我想到了这样一个函数：假设我们在example2.php

中

function blahblah(){
    1) get the link list using DOM from index.php (using an array)
    2) search for "example2.php" in the href value of each element in the list, to get the index of the array: in this case, "example2.php" is the 2nd link of index.php, so the array index will be 1 (i.e. alert(linkList[1].href) will print "example2.php")
    3) once we know the index, previous page index will be "index-1" and next page will be "index+1"
}

关于获取列表（我的伪代码中的第一点），我不知道如何使用DOM元素访问其他页面（在同一个域上）..有点像文档（“page”）。getElementById（'links '）存在而不需要iframe？

我走在正确的轨道上？还是完全错了？任何帮助，想法或建议表示赞赏。谢谢，最好的问候

Answer 1

不，你不能轻易访问其他文件，但如果div列表在每个页面上，那么添加导航非常容易

window.onload=function() {
  var navLinks = document.getElementById("links").getElementsByTagName('a');
  var loc = location.href;
  var href,html="";
  for (var i=0;i<navLinks.length;i++) {
    href=navLinks[i].href;
    if (loc.indexOf(href)!=-1) {
      if (i==0) html+='prev ';
      else html +='<a href="'+navLinks[i-1].href'">prev</a>' 
      if (i==navLinks.length-1) html+=' next ';
      else html +='<a href="'+navLinks[i+1].href'">next</a>' 
    }
  }
  if (html) document.getElementById("links").appendChild(html);
}

基于html无序列表的javascript导航按钮（上一页下一页）

1 个答案: