javascript - 从菜单列表中的单独 url 加载 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'));
});

我希望这能让你走上正确的道路