Sayfa Yenilenmeden Link Değiştirme
Html5 ile gelen bir özellik olan location.hash sayesinde artık sayfa yenilenmeden linkimizi değiştirebiliyoruz. bende bugün nasıl değiştireceğimizden bahsetmek istiyorum.
Kodlarımız:
<!DOCTYPE html>
<html>
<head>
<title>Html5 ile sayfa yenilenmeden link değiştirme </title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keyword" content="" />
<meta name="author" content="Vehbi Akdogan" />
<script src="js/jquery.min.js?v=1.0"></script>
<script type="text/javascript">
$(function(){
$("ul.menu li a").click(function(){
var hash = $(this).attr("href"); // adresi aldık
location.hash = hash; // adres çubuğumuzu değiştirdik
$(".hash").html("mevcut adres: " + hash); // ekrana gösterdik
return false;
});
});
</script>
<style type="text/css">
ul.menu li {
float:left;border:1px solid #ddd;
padding:5px 15px;
margin-lefT:5px;
list-style:none;
}
ul.menu li a {
display:block;
width:100%;
height:100%;
text-align:center;
text-decoration:none;
color:#555;
}
.hash {
clear: both;
margin-top:20px;
width:100%;
color:#555;
displaY:block;
}
</style>
</head>
<body>
<ul class="menu">
<li> <a href="anasayfa.html">Anasayfa</a></li>
<li> <a href="hakkimizda.html">Hakkımızda</a></li>
<li> <a href="iletisim.html">İletişim</a></li>
</ul>
<div class="hash"></div>
</body>
</html>