javascript - .load() 不适用于 ul li click

Question

这是我的代码

$(document).ready(function(){
  $("#work").click(function(){
    $("#container").load("about/work.html");
  });
  $("#profile").click(function(){
    $("#container").load("profile.html");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a id="work" href="">work</a></li>
  <li><a id="profile" href="">profile</a></li>
</ul>

<div id="container"></div>

当我单击工作或配置文件请求的页面时，它只会在容器 div 中闪烁，有时会停留在其中，但如果我在按钮上运行相同的脚本，则单击它会毫无问题地加载页面。我怎样才能让它与 li 一起工作？

Answer 1

添加event.preventDefault

$(document).ready(function(){
  $("#work").click(function(event){
    event.preventDefault(); //changed here
    $("#container").load("about/work.html");
  });
  $("#profile").click(function(event){
    event.preventDefault(); //changed here
    $("#container").load("profile.html");
  });
});