javascript - 我不确定我的 ajax 导航是否正常工作

Question

我尝试使用历史记录 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'
});

 }




 });

这是我的哈维加里恩

 <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>

Answer 1

你的成功函数看起来不太好:

success: function(data){
   jqObj = $(data);
   var addSmth = jqObj.find('#central');
   $("#central").html('').html(addSmth);

我认为您的意思是以下内容？

success: function(data){ //data is normally just a string
    $("#title").html(data));

或

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(addSmth);

@放慢速度:

$('li[id^=id_]') 可能会减慢速度。我建议您为此使用类。

您还可以在创建点击事件后创建nivoSlider。如果您想确保点击事件尽快完成。