Question

所以我搜索了网站，但我无法找到问题的答案。我有一个有两个div的页面。左侧div包含一个折叠式菜单，该菜单链接到右侧DIV内显示的不同页面。我已经使用这个例子将不同的外部html文件加载到正确的DIV中。

How to change the contents of a div with a link click?

有没有办法让链接链接到当前div中页面的特定部分？当我使用向锚点添加名称然后将其作为/nameofpage.html#anchorname链接的方法时，它将其定位到空白页面上。

以下是我如何设置导航设置

<li><a id="nameofpage" class="Navigation">Link1</a></li>
<li><a href="nameofpage.html#link2">Link2</a></li>
<li><a href="nameofpage.html#link3">Link3/a></li>
<li><a href="nameofpage.html#link4">Link4</a></li>

以下是HTML在加载到DIV的外部页面上的方式

<h2 name="link1">Link1</h2>
<img>
<p></p>
<h2 name="link2">Link2</h2>
<img>
<p></p>
<h2 name="link3">Link3</h2>
<img>
<p></p>
<h2 name="link4">Link4</h2>
<img>
<p></p>

Answer 1

此函数将目标拆分为页面地址和目标锚点，并在jquery加载后触发scrollTop函数。请注意，还添加了“菜单”和 onclick =“return false”的班级名称：

<a href="nameofpage.html#link1" class="menu" onclick="return false">link 1</a>
<div id="content"></div>

<script type="text/javascript">
$(document).ready(function(){
    $(".menu").click(function(){
        var mytarget=$(this).attr("href");
        var myarray=mytarget.split("#");
        var targetPage=myarray[0];
        var targetAnchor=myarray[1];
        $("#content").load(targetPage,function(){ 
        $('html, body').animate({scrollTop: $("#"+targetAnchor).offset().top}, 2000);
        ;});
    });
});
</script>

以下是加载页面的示例源，其中包含目标锚点：

<html>
    <head>
        <style>
        #emptySpace{height:800px;background:#aaaaaa}
        </style>
    </head>

    <body>
        <div id="emptySpace"></div>
        <a id="link1">page scrolls here</a>
    </body>
</html>

在DIV中链接到外部.html的一部分

1 个答案: