.load（）不工作UL李点击

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

尝试onclick

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

Answer 3

有两件事情在这里改变。

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