I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please help me?
(I know my CSS code is fine because it's an old one that I've used before)
Here is the HTML for my menu:
<head>
<title> Practice 5 </title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/all.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
function loadPage(page,menuItem){
$.ajax({
url : page,
cache : false,
success : function(object,status,response){
$("#principal").html(response.responseText);
}
});
$("#menu div").removeClass('active');
$("#m"+menuItem).addClass('active');
}
</script>
</head>
<body>
<div id="message" style="display:none" title="Hello">
Welcome to my page!
</div>
<div id="area">
<div id="menu">
<div id="m1" onClick="javascript:loadPage('about.html',1)">Home</div>
<div id="m2" onClick="javascript:loadPage('page4.html',2)">About</div>
<div id="m3" onClick="javascript:loadPage('help.html',3)">Help</div>
</div>
<div id="principal">
</div>
</div>
</body>