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

Question

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

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

有什么方法可以使 link 成为当前 div 页面的特定部分？当我使用向锚点添加名称然后 link 将其作为 /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 函数。请注意 "menu" 的 class 名称和 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 的一部分

Linking to part of external .html within a DIV

html

ajax

jquery

hyperlink

nav