我试图用历史 API 制作菜单。但在我看来它工作得不好,我有理由这么认为:
1 我的“标题”没有改变
2 如果我在我的链接上点击快速,我在重新加载时会闪烁页面,但它不应该!(但如果我点击慢,没关系。如何防止重新加载或闪烁?)
请告诉我我做错了什么
$(document).ready(function(){
sliderStartUp()
//menu click
$('.navigation').click(function(){
//fill the storage
var storage = {
url: $(this).children('a').attr('href'),
title: $(this).children('a').attr('title')
};
history.pushState(null, storage.title, storage.url );
$.ajax({
url: $(this).children('a').prop("href"),
cache: false,
success: function(data){ //if the data you return is a css notation (eg: #id) of the location of the title name
JqObj = $(data);
var addSmth = JqObj.find('#central').html();
$("#central").html('').html(addSmth);
sliderStartUp()
}
});
return false;
});
function sliderStartUp(){
$('#slider').nivoSlider({
effect: 'fold',
animSpeed: '500',
pauseTime: '4000'
});
}
});
这是我的havigarion
<ul id="navig">
<?php
if ($_SERVER['REQUEST_URI'] == "/")
{
$_SERVER['REQUEST_URI'] = "/index";
}
$arrayNav = array( array (
'name' => 'yyyyyy',
'title' => 'yyyyyyyyyyy',
'link' =>'http://bistro.loc/index',
'identificator' => 'id_index',
'pattern' => '/index/i'
),
array (
'name' => 'xxxxxx',
'title' => 'xxxxxxx',
'link' => http://bistro.loc/price',
'identificator' => 'id_price',
'pattern' => '/price/i'
),
array (
'name' => 'aaa',
'title' => '',
'link' => 'http://bistro.loc/#' ,
'identificator' => 'id_serv',
'pattern' => '/#/i'
),
array (
'name' => 'ssss',
'title' => '',
'link' => 'http://bistro.loc/#' ,
'identificator' => 'id_cont',
'pattern' => '/#/i'
),
array (
'name' => 'dddd',
'title' => '',
'link' => 'http://bistro.loc/#' ,
'identificator' => 'id_about',
'pattern' => '/#/i'
));
foreach ($arrayNav as $item)
{if (preg_match($item['pattern'],"http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] ))
{
echo "<li class = \"navigation\" id = \"".$item['identificator']."\" tltle=\"".$item['title']."\"><a href=\"".$item['link']."\" class=\"active\">".$item['name']."</a></li>";
}else{
echo "<li class = \"navigation\" id = \"".$item['identificator']."\" tltle=\"".$item['title']."\"><a href=\"".$item['link']."\">".$item['name']."</a></li>";}
;}
?>
</ul>