负载html元素在菜单列表

Question

我有一个站点导航等：

<ul> 
    <li> 
    <a href="/link1">Link 1</a> 
    </li> 
    <li> 
    <a href="/link2">Link 2</a> 
    </li> 
    <li> 
    <a href="/link3">Link 3</a> 
    </li> 
    <li> 
    <a href="/link4">Link 4</a> 
    </li> 
</ul> 

当在任一链接的用户点击，从每个URL的主要内容将被加载到一个页面，页面向下滚动到相关部分。我试过类似下面的东西，但它似乎不是最好的解决方案。有没有更好的方法来做到这一点？谢谢。还应该指出下面的代码无法正常工作，它会以不同的顺序加载内容一次以上。

$("ul > li > a").each(function(index) { 
    var newhref = $(this).attr('href'); 

    $.get(newhref).done(function (html) { 
     $(".main-copy").append($(html).find(".main-copy")); 
    }); 

}); 

Answer 1

首先，我建议每一个环节应该是它里面自己-li-这样的：

<ul> 
    <li> 
    <a href="/link1">Link 1</a> 
    </li> 
    <li> 
    <a href="/link2">Link 2</a> 
    </li> 
    <li> 
    <a href="/link3">Link 3</a> 
    </li> 
    <li> 
    <a href="/link4">Link 4</a> 
    </li> 
</ul> 

至于JQuery的，这样的事情应该做的伎俩：

$("ul > li > a").click(function(){ 
    $(".main-copy").load($(this).attr('href')); 
}); 

我希望你设定在正确的道路

Answer 2

如果负载的事情是工作，都是你只需看着滚动的东西？尝试是这样的：

// Creating a dummy namespace, as I don't have content to actually load via ajax. 
 
var myNameSpace = { 
 
    "link1": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link2": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link3": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>", 
 
    "link4": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>" 
 
}; 
 

 

 
    // Take each of the navigation elements, and use them to create the content sections 
 
    $("nav a").each(function() { 
 
    /*** 
 
    * This would be where you'd first want to load 
 
    * your HTML content, rather than using the namespace. 
 
    ***/ 
 
    // Get the actual text of the anchor, we'll use that later 
 
    var target = $(this).attr("href").substring(1); 
 

 
    // create the section tag... 
 
    var myTargetEl = document.createElement("section"); 
 

 
    // set the id for the link to use as a target 
 
    $(myTargetEl).attr("id", target).append("<h2>" + target + "</h2>").append(myNameSpace[target]); 
 

 
    // Add the section we've created to the content pane 
 
    $(".content-pane").append(myTargetEl); 
 

 
    // AND CHANGE THE ACTUAL LINK -- I don't want to reload 
 
    // this content every time! 
 
    $(this).attr("href", "#" + target); 
 
    }); 
 

 
    $("nav a").click(function() { 
 
    var target = $($(this).attr("href")); 
 
    if (target.length) { 
 
     event.preventDefault(); 
 
     $('html, body').stop().animate({ 
 
     scrollTop: target.offset().top 
 
     }, 1000); 
 
    } 
 
    }) 
 

nav { 
 
    position: fixed; 
 
    left: 10px; 
 
    top: 10px; 
 
    float: left; 
 
    width: 100px; 
 
    background-color: #ccc; 
 
} 
 
.content-pane { 
 
    position: relative; 
 
    left: 120px; 
 
    width: 400px; 
 
    height: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a href="/link1">Content 1</a> 
 
    <a href="/link2">Content 2</a> 
 
    <a href="/link3">Content 3</a> 
 
    <a href="/link4">Content 4</a> 
 
</nav> 
 
<div class="content-pane"> 
 
</div>

至于负载事情会发生，只是每个环节加载到其自己的节标记。事实上，使用链接列表来创建节块，这样如果添加更多的导航元素，它们就会动态加载。

修改了代码，以便有被手动插入任何部分，他们通过链接标记自己创造。至于你如何加载它们，你似乎在做这件事 - 所有你缺少的是每次改变链接的HREF指向适当的部分。

Answer 3

这些链接是硬编码还是动态生成的？ 在这两种情况下，获得所有这些链接到一个JavaScript数组：var links=['link1','link2'...]

既然你要通过这些链接导航到转储所有内容，您可以循环通过链接和追加内容

for(i=0;i<links.length;i++) { 
    var link = links[i]; 
    $.ajax(link).done(function(htmlContent){ 
        //set contents to some section or div 
        }); 
} 

现在，链接本身可以是页面中的#href标签。

我的建议是不使用jQuery的UL导航 - > LI路径得到的链接列表。