javascript - .load() not working on ul li click -
here code
$(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>
when click on work or profile requested page flashes in container div , sometime stays in if run same script on button click loads page without problem. how can make work li ?
add 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"); }); });
Comments
Post a Comment