Я создаю веб-сайт с «якорной навигацией», как и с facebook и почтой Google. У меня это работает, но не полностью. Когда я загружаю страницу с чем-то вроде #contact
, она не загрузит ее, если я не нажму ссылку на нее. Кроме того, будет ли лучший, более эффективный способ делать то, что я делаю? Я не лучший человек с программированием JS.Javascript anchor navigation
JavaScript:
$.navigate = function() {
// a new link
if($anchor != document.location.hash){
// add a preloader
$("#content")
.empty()
.html('<p class="align-center"><img src="assets/images/loading.gif" /></p>');
// change the anchor saved for next time
$anchor = document.location.hash;
// get the variables ready for the get
var i = $anchor.substring(1).split("/");
var $page = i[0];
var $y = (i[1]) ? i[1] : false;
// get the file
$.get("callback.php", { x: $page, y: $y }, function(data){
$("#content")
.empty()
.html(data);
},"html");
}
};
$(function() {
var $anchor = "";
// change from the URI. This dont work.
if(document.location.hash){ $.navigate(); }
$("a","#nav")
.css({backgroundColor:"#f7f7f7"})
.each(function() {
$(this).attr("href","#" + $(this).attr("name"));
});
setInterval('$.navigate()', 300);
});
HTML:
<div id="nav">
<ul class="horizontal-nav">
<li><a href="http://streetmafia.co.uk/" name="index">Home</a></li>
<li><a href="http://streetmafia.co.uk/about" name="about">About</a></li>
<li><a href="http://streetmafia.co.uk/portfolio" name="portfolio">Portfolio</a></li>
<li><a href="http://streetmafia.co.uk/contact" name="contact">Contact</a></li>
</ul>
<div id="l-nav"></div>
<div id="r-nav"></div>
</div>
Не забудьте принять ответ. – fserb