Question

我在这里看到了一些与此有关的问题，但我没有看到我正在谈论的确切情况所以我想我会问。

我有一个包含两个div的页面。 sidenav div（DECLARE @comando as varchar(5000) set @comando = 'DTEXEC /FILE \"" /de "pass" /CHECKPOINTING OFF /REPORTING EW' select @comando = @comando + ' /SET "\"\Package.Variables[' + Replace(str_NombreVariable,'User::','') + '].Value\"";' + CASE WHEN str_NombreVariable LIKE '%v_sCadenaConexion%' THEN '"\"'+ str_ValorVariable ELSE str_ValorVariable + CASE WHEN str_NombreVariable LIKE '%v_sRutaArchivo%' THEN @archivoCargado + '.csv\""' ELSE '' END END + '' from [Catalogo].[catVariablesEtl] where IdPaquete = 42）和主体（sidediv）div。

我想要的：单击侧面导航中的链接以在主div中加载页面。目前，无论如何，它总是相同的页面，但它是一个巨大的页面，有几个锚点。侧面的物品链接到不同的锚点。

我在做什么：我的sidenav链接看起来像这样：

maindiv

和JS：

<a href="#" onclick="loadPage('mypage.html#ds'); return false;">Desired Section</a>

会发生什么：它加载mypage.html很好，但拒绝转到锚点。

我如何实现这一点（没有jQuery，顺便说一句，我目前没有在网站上使用它，并且不想为一件事加载它）

感谢。

Answer 1

好的，这很有趣，所以我为你拍了一下。这就是我想出的。它使用scrollIntoView。另外请记住，我模拟了ajax调用，因此我的loadPage函数会以不同的方式执行某些操作。

var pages = {
    'mypage.html': '<div id="ts" class="page">my stuff</div><div id="ds" class="page">my more stuff</div><div id="eds" class="page">my even more stuff</div>',
    'yourpage.html': '<div id="ts" class="page">your stuff</div><div id="ds" class="page">your more stuff</div><div id="eds" class="page">your even more stuff</div>'
};

function loadPage(url) {
    var set = url.split('#'),
        page = set[0],
        id = set[1];

    // simulate xhr request
    setTimeout(function() {
        document.getElementById('maindiv').innerHTML = pages[page];
        document.getElementById(id).scrollIntoView();
    }, 1000);
}

.page {
  height: 400px;
}

.menu {
  width: 200px;
  float: left;
  position: fixed;
}

#maindiv {
  width: 50px;
  float: right;
  background: lightblue;
}

<div class="menu">
    <a href="#" onclick="loadPage('mypage.html#ds'); return false;">My Page #ds</a><br />
    <a href="#" onclick="loadPage('yourpage.html#eds'); return false;">Your Page #eds</a>
</div>

<div id="maindiv">
</div>

使用AJAX将页面加载到特定锚点的div中

1 个答案: