.load() не работает на ул Li нажмите

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

Есть 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"); 
    }); 
});