I'm working with this code to make a hash change page, but it seems to be throwing my CSS off
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyle.css">
<link href='http://fonts.googleapis.com/css?family=Dynalight' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" href="css/font-awesome-4.3.0/css/font-awesome.min.css">
<title>Classic designs</title>
</head>
<body>
<?php
require_once 'navagation.php';
?>
<div class="site-wrap">
<div class="main">
<h1>Cake</h1>
<section id="coding">
<h2>Introduction</h2>
<hr />
What I don't know?
</section>
</div>
</body>
</html>
$(document).ready(function () {
$(window).on("hashchange",function(){
console.log(location.hash)
if (location.hash) $(".navigation, .site-wrap").load(location.hash.slice(1)+ ".php" )
}).trigger("hashchange")
$('.tutorials').click(function(){
$( ".tuts > li").slideToggle(500);
return false;
});
$('.tuts > li').click(function(e) {
var href = $(e.target).attr("href")
console.log(e.target, href)
if(href === "#") {
$(this).children('ul').children('li').slideToggle(500); //my children
$(this).siblings().children('ul').children('li').slideUp(500); //my nieces
console.log('li')
return false
}
else {
location = href
}
});
function redirectPage() {
window.location = linkLocation;
}
});