Question

我有一个services.php页面，我使用for循环使用MySQL数据库中的信息创建页面的不同服务内容。

<?php for ($i=0; $i < $numberOfRecords; $i++) { ?>

<div class="download-div">

    //this line below creates the anchor with the correct id
    <a id="<?= $scroll ?>" name="<?= $scroll ?>"></a>
    <h1><?= $service[$i] ?></h1>
    <p><textarea spellcheck="true" class="service-text" name="description<?= $i ?>"><?= $description[$i] ?></textarea></p>
    <p class="current-file">Current file: <?= $image[$i] ?></p>
    <input type="file" class="browse" name="image<?= $i ?>">
    <div class="img-wide">
        <img src="upload/<?= $image[$i] ?>">
    </div>

</div>

<?php } ?>

循环创建10个不同的服务部分，每个部分都有服务名称，描述和图像。

当我点击另一个页面上的锚标签（IE＆lt;'a href =“services.php #reforestation”＆gt;），它应该链接到每个部分中a标签的id时，它就会去到services.php页面的顶部。但是，当我再次单击该链接时，它会转到我希望它转到的页面部分。（I.E.＆lt;'a id =“reforestation”name =“reforestation”＆gt;）

就好像浏览器在加载/创建页面之前没有看到锚点ID。然后，一旦加载，一旦我点击锚标签，它将转到我想要的页面区域。

有解决这个问题的方法吗？

Answer 1

尝试删除name =属性，因为我在某些浏览器中遇到此问题并确保您没有其他ID =＆＃34;重新造林＆＃34;它会在你的文档中（例如在菜单中）转到任何具有匹配id =的标签（根据HTML5规范）。还要确保您没有滚动或进行任何输入，因为这会中断滚动操作。检查它在其他浏览器中是否也一样。

Answer 2

因为它正在导航到另一个页面。我会在页面上使用javascript来检查我们是否在Windows地址栏中有一个哈希值。以下函数可以提取该哈希值。

window.onload = function() {
  if(window.location.hash) {
    var hash = window.location.hash;
    return hash.substring(1); // remove #
    //Once you have this hash you can scroll your page to that element
    location.hash = "#" + hash;
  }
}

如果您喜欢上述功能，可以使用下面的内容

function scrollTo(hash) {
  location.hash = "#" + hash;
}

function getHash() {
  var hash = window.location.hash;
  return hash.substring(1); // remove #
}

window.onload = function() {
  if(window.location.hash) {
    scrollTo(getHash());
  }
}

如何链接到动态创建的其他页面？

2 个答案: