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中闪烁并且有时会停留在但是如果我在按钮上运行相同的脚本则单击它会加载页面而没有任何问题。我怎样才能让它与李一起工作？

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");
  });
});

Answer 2

这里有两件事需要改变。

1）尽量不要将href值留空。如果您这样做，浏览器将重定向到同一页面。如果可能，请为其#

提供值href="#"

2）preventDefault()点击事件

中缺少<a>个功能

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

Answer 3

尝试$ on

click

.load（）没有在ul li上工作

3 个答案: