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>

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

$( "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

首先，我建议每个链接都应该在其内部 - 像这样：

<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>

就负载而言，只需将每个链接加载到自己的section标签中。实际上，使用链接列表来创建节块，这样如果添加更多导航元素，它们将动态加载。

修改代码以便不会手动插入任何部分，它们是由链接标记本身创建的。至于你如何加载它们，你似乎做得很好 - 你所缺少的就是每次更改链接的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标记。

我的建议是不要在UL上使用Jquery进行导航 - >获取链接列表的LI路径。

从菜单列表中的单独网址加载html元素

3 个答案: